Three.js 关于照相机，视角的理解

Three.js 关于照相机，视角的理解

另附说明：本系列文章只是作者用于学习理解threejs以及WebGL的学习心得，学习途径也是从WebGL中文网上学习所得，如果上述网站认定侵权或不正当触犯其利益，请联系作者（PS:千万别告我），其它转载者造成的影响请自己负责，与本人无关

好了，该声明的也声明了，本人也是初入thre.js的丑新，写写也是为了记录理解，说的不对的地方，也欢迎批评指正

通过对WebGL中文网初级教程的前三章的学习。
知道3D应用中有4个最重要的组建 场景（scene）、相机（camera）和渲染器（renderer）还有几何体
场景渲染器几何体的理解不难，这里详细说一下相机

这是照相机的构造函数

//fov 代表视角
//aspect 宽高比
//near 最近看到
//far 最远看到
var camera = PerspectiveCamera( fov, aspect, near, far )
//而这里其实确认的是照相机里*面的距离
camera.position.z = 5;

同时需要当心的是这里使用的是右手坐标系（听视频老师讲的，本人也亲测了）

另附学习代码

<script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/(window.innerHeight), 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); scene.add(cube); var z = 5; var z1 = true; camera.position.z = z; camera.position.y = 1.5; camera.position.x = -1.5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.01; cube.rotation.y += 0.01; cube.rotation.z += 0.01; if(z1 == null){ z1 = z; } if(z > 50){ z1 = false; }else if(z < 5){ z1 = true; } if(z1){ z = z + 0.1; }else{ z = z - 0.1; } camera.position.z =z; renderer.render(scene, camera); } render(); </script>