【threejs学习随记（二）】——up属性与lookAt方法解析

来源：互联网发布：excel删除重复数据的行编辑：程序博客网时间：2024/05/21 21:50

up属性

camera的up属性其实是继承基类Object3D，定义了三维空间中向上的方向。官方文档中原话是：

This is used by the lookAt method, for example, to determine the orientation of the result.
Default is Object3D.DefaultUp - that is, ( 0, 1, 0 )

怎么理解呢？直白翻译就是：供lookAt方法使用，决定结果（渲染）的方向。默认是（0，1，0）方向。而threejs中默认的3D坐标系如下图，：

z轴正方向指向屏幕外，x，y平面在屏幕上。坐标原点（0,0,0）默认为场景中心。照相机就是在这个坐标系中定义的。因此up方向默认是（0，1，0）则很好理解，表示y轴向上。所以改变相机的up属性值相当于改变3D坐标系的方向。

设定3D坐标系的向上方向为x轴，代码如下：

camera.up = new THREE.Vector3( 1, 0, 0 );

相机所处坐标系的如下图所示：

设定3D坐标系的向上方向为z轴，代码如下：

camera.up = new THREE.Vector3( 0, 0, 1 );

相机所处坐标系的如下图所示：

可见，up属性的改变将直接影响相机所处3维空间的位置。

2. lookAt方法

lookAt是camera的一个方法，目的是让camera的镜头看向三维空间中指定的位置。其调用形式如：lookAt（target）——其中target参数是一个具体Vector3对象，代表了三维空间的某点。

上面已经提到，camera的up属性是服务于lookAt方法的，因为lookAt指向的坐标必须依赖于目前的坐标系。换句话说，当更改相机的up属性，即改变了空间的向上方向后，程序中所有Vector3对象的坐标必须以改变后的坐标系为参考的，lookAt方法传入的Vector3对象也同理。且相机同样默认看向新3维空间的-z方向。

3. 举例说明

可能还有盆友看到这里很晕，没关系，看了下面的demo应该就明白了。

示例：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Three框架</title>    <script src="three.js" data-ke-src="js/Three.js"></script>    <style type="text/css">        div#canvas-frame {            border: none;            cursor: pointer;            width: 100%;            height: 600px;            background-color: #EEEEEE;        }    </style>    <script>        var renderer;        function initThree() {            width = document.getElementById('canvas-frame').clientWidth;            height = document.getElementById('canvas-frame').clientHeight;            renderer = new THREE.WebGLRenderer({                antialias : true            });            renderer.setSize(width, height);            document.getElementById('canvas-frame').appendChild(renderer.domElement);        }        var camera;        function initCamera() {            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);            camera.position.x = 0;            camera.position.y = 1000;            camera.position.z = 0;                        camera.up =  new THREE.Vector3( 0, 0, 1 );            camera.lookAt({                x : 0,                y : 1,                z : 0            });        }        var scene;        function initScene() {            scene = new THREE.Scene();        }        var light;        function initLight() {            light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);            light.position.set(100, 100, 200);            scene.add(light);        }        var cube;        function initObject() {            var geometry = new THREE.Geometry();            var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );            var color1 = new THREE.Color( 0x000000 ), color2 = new THREE.Color( 0xffffff );            // 线的材质可以由2点的颜色决定            var p1 = new THREE.Vector3( -100, 0, 100 );            var p2 = new THREE.Vector3(  100, 0, -100 );            geometry.vertices.push(p1);            geometry.vertices.push(p2);            geometry.colors.push( color1, color2 );            var line = new THREE.Line( geometry, material );            scene.add(line);        }        function render()        {            renderer.clear();            renderer.render(scene, camera);            requestAnimationFrame(render);        }        function threeStart() {            initThree();            initCamera();            initScene();            initLight();            initObject();            render();        }    </script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>

demo效果如下：

对照我上面画的空间向上方向为z轴的坐标系，就很容易理解效果为啥是这样了。可以自己随意调整下lookAt指向的坐标，来看下不同渲染效果，方便加深对lookAt方法的理解。

阅读全文

0 0