three.js基础

在three.js中，有两类几何体，基本几何体和buffer（缓存）几何体。

基本几何体的顶点位置，缩放，旋转角，颜色，法线信息都是保存在特定的类里面，比如顶点位置使用Vector3，颜色信息使用Color。

基本集合使用类来管理自身信息，便于操作，用来创建经常变化的物体；

buffer（缓存）类的都是使用数组存储的，并且缓存在了内存缓冲区里，减低了对GPU的消耗。 buffer几何体由于使用数组来管理，如果需要操作，必须去除其原始信息，难操作，而且buffer几何体的信息被缓存在缓冲区中，减低了对GPU的消耗，所以Buffer几何体适用于创建那种一旦创建就不需要修改的物体。

常用：PerspectiveCamera()      //透视相机（远景相机）

OrthographicCamera()    //正交投影相机

CubeCamera    //立方体相机

3d模型常见格式：

gltf ，obj 等

//创建场景（画布）

const scene= new THREE.Scene();

//创建立方体

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color : 0x00ff00 })

// 创建网格对象（用来承载几何模型的一个对象）

const cube=new THREE.Mesh(geometry,material);

scene.add( cube ); //对象将被添加到原点处，即坐标（0,0,0）这将导致相机和立方体发生空间重叠，为避免可移动相机位置

//创建相机

const camera=new THREE.PerspectiveCamera(75(视角),window.innerWidth / window.innerHeight,0.1,1000);

camera.position.z=5;  //相机位置

//渲染

const renderer=  new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

//以上渲染出来几何体是静止的

//渲染循环（动态的）

var render=function(){

requestAnimationFrame( render );

cube.rotation.x +=0.1;

cube.rotation.y +=0.1;

renderer.render(scene,camera);

}

render();