代码改变世界

Extjs 4.2 MVC+ThreeJs学习笔记（二）一个简单的ThreeJS场景

2013-08-29 15:36  Mirana  阅读(907)  评论(1)  编辑  收藏  举报
  1. ThreeJS基本要素
    在我们用ThreeJS创建的3D世界里，会有很多的元素，然而以下四个是最基本的元素，也就是说只要包含了这些元素，就可以渲染出一个场景。
  • 一个Scene（场景）
  • 一个renderer（渲染器）
  • 一个camera（镜头）
  • 一个object（模型对象）
  1. 浏览器
    以我的经验来看，Google的Chrome浏览器是表现最优秀的浏览器，没有之一。Chrome支持Canvas，WebGL和SVG。Firefox是第二选择，Opera也支持WebGL，Mac上的Safari只需要开启WebGL设置，IE目前不支持WebGL需要添加插件（IE11据说会支持）。强烈推荐大家使用Chrome浏览器。
  2. 场景
    要做一个场景，首先你需要一个ThreeJS库，下载地址：https://github.com/mrdoob/three.js
    1. <html>
    2. <head>
    3.    <title>一个简单的场景</title>
    4. </head>
    5. <body>
    6.    <script src="../build/three.min.js"></script>
    7.    <script>
    8.    //定义画布的高度和宽度
    9.    var width = 400, height = 300;
    10.    //定义镜头的角度 宽高比 最近最远的限制
    11.    var view_Angle = 45,aspect = width / height,near = 0.1,far = 10000;
    12.    //创建一个Div元素 这是装Canvas的容器
    13.    var container = document.createElement( 'div' );
    14.    //将容器添加到body中
    15.    document.body.appendChild( container );
    16.    //创建一个WebGL渲染器
    17.    var renderer = new THREE.WebGLRenderer();
    18.    //创建一个镜头 参数是上面定义的
    19.    var camera =new THREE.PerspectiveCamera(view_Angle,aspect,near,far);
    20.    //创建一个场景
    21.    var scene = new THREE.Scene();
    22.    //将镜头加入到场景中
    23.    scene.add(camera);
    24.    //把渲染器的DOM元素加到容器中 实际上是把一个WebGL渲染器生成的Canvas场景添加到body中的DIV容器中去了
    25.    container.appendChild( renderer.domElement );
    26.    //创建一个Cube
    27.    var cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshNormalMaterial() );
    28.    scene.add(cube);
    29.    //调整镜头的Z轴坐标
    30.    camera.position.z = 500;
    31.    //调整画面的大小
    32.    renderer.setSize(width, height);
    33.    //渲染
    34.    renderer.render( scene, camera );
    35.    </script>
    36. </body>
    37. </html>
  3. 在Chrome浏览器中打开你会看到这样一幅图：

    它是一个立方体，至于为什么我们只能看到一个正方形是因为我们只渲染了一帧，所以只能看到它的一个面。你可以调整一下镜头的角度，有可能会看到3个面，当然也有可能会什么都看不到＝。＝
    要理解空间坐标系，镜头这些东西，还是需要一些OpenGL的基础知识的，推荐大家看一下OpenGL编程指南，不用太深入，了解一些基础知识就好了。