Threejs学习笔记(一) 基础篇

基本概念

---

一个完整的3D环境包含以下元素:

1.场景(Scene)：是物体、光源等元素的容器，
2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机
3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子
4.光源（Light）：包括全局光、平行光、点光源
5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。
6.控制器(Control): 相机控件，可通过键盘、鼠标控制相机的移动

场景(Scene)
物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲染出来。
一个3D项目中可同时存在多个scene，通过切换render的scene来切换显示场景
var scene = new THREE.Scene();
var mesh=scene.getObjectByName(“sky”);//获取场景中name=sky的物体；
相机（Camera）
基本概念
相机根据投影方式分两种：正交投影相机和透视投影相机

正交投影相机:THREE.OrthographicCamera(left, right, top, bottom, near, far),大小不因远近而变化
透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far)，遵循近大远小的空间规则

一般情况下，我们使用的是透视投影相机，其参数为：

fov: 垂直方向夹角
aspect:可视区域长宽比 width/height
near:渲染区域离摄像机最近的距离
far:渲染区域离摄像机最远的距离，3仅在距离摄像机near和far间的区域会被渲染到 canvas中

相机有两个重要的参数：

camera.position：控制相机在整个3D环境中的位置（取值为3维坐标对象-THREE.Vector3(x,y,z)）
camera.lookAt：控制相机的焦点位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）

以下代码创建一个垂直夹角为45度、渲染区域为距离镜头1px到1000000px的透视投影相机，设置其位置为x:500px,y:0,z:500px，镜头朝向空间坐标轴原点x:0,y:0,z:0

var camera = new THREE.PerspectiveCamera( 45, 1920 / 1000, 1, 1000000 );
camera.position.set(500, 0, 500);
camera.lookAt(new THREE.Vector3(0,0,0));

主要应用
1.设置相机焦点位置为原点坐标或某物体的位置坐标：camera.lookAt(new THREE.Vector3(0,0,0))，循环改变camera.position的位置，可以实现围绕物体旋转 360度观看物体的动画。
2.同时循环设置camera.lookAt和cam