threejs 三面体_使用threejs绘制简单的3D图形

* fog: 表示是否在场景中添加雾气效果，在3D空间中会变成一个有可见度的空间，默认值为null，可以设置一个Fog对象

* overrideMaterial：默认值是null，可以设定一个Material对象，这样场景中所有的物体被渲染出来就会是设定的材料

相机

相机用于控制3D空间显示的区域，通常会采用显示距离的透视相机和显示投影的正交相机，当然以可以直接使用相机，并配置合适的参数来实现相应的相机。透视相机会根据场景中物体默认Z轴的深度进行近大远小的显示，而正交投影相机则会将远近不同的物体按正常的比例进行显示。

普通相机直接使用：const camera = new THREE.Camera();

3D场景汇总常用透视相机， 如果是生成一个透视相机，那么对于3D空间内同样大小但是Z轴距离不容的两个物体在相机中同时显示，更远的物体显示更小。

const camera = new THREE.PerspectiveCamera(45, 1, 1, 100);

透视相机默认接受4个参数，分别表示视角、截面纵横比， 近截面距离，远截面距离(具体参数解释看上面那个链接，还有模型可看)

渲染器

浏览器中3D效果展示是基于webGL的API，使用渲染器从名字上能够体现这一点

const renderer = new THREE.WebGLRenderer();

初始化是可以配备参数的：

* canvas：传递一个canvas的dom元素，如果不传入，那么会新增画布，通过renderer.domElement来获取，画布用于展示绘制的内容

* alpha： 画布默认是黑色背景，有时候我们只想要显示的内容有颜色，那么这一项就要设置为true

* antialias：抗锯齿效果，顾名思义，默认为false

* logarithmicDepthBuffer：这个值默认为false，是采用对数深度检测的内容，场景中物体离视野的距离不一，一般情况下在物体重叠时显示近的物体，特殊情况有可能深度判定有问题，前后材料有重叠破损的表现，此时就需要设置为true

三个核心对象确定完毕，那么就和页面直接关联起来，设置画布大小并添加到body中：

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

document.body.appendChild( renderer.domElement );

下面就粗暴地添加一组物体：

所谓组的概念，是由于场景中3D图形是一个一个的，多个3D图形就可以组成一组，一个或者一组图形都可以通过name属性命名，并通过name找到对应的3D对象。对于一个场景中有多个模型，分组是十分必要的。

添加一组物体，首先要有一个物体，物体有形状，有材料，要想显示材料就需要有光，更多地还需要确定物体的位置、旋转角度、缩放比例。想要显示还需要添加到场景中，相机正确就位，渲染器将相机定住的视野进行拍照渲染。

let group = newTHREE.Group();

scene.add(group);//添加两个物体

let cube = new THREE.BoxGeometry( 10, 10, 10);

let boxMaterial= new THREE.MeshBasicMaterial( {color: 0x00ff00, wireframe: true} );

let box= newTHREE.Mesh( cube, boxMaterial );

box.position.x= 10;

group.add( box );

let sphere= new THREE.SphereGeometry( 5, 32, 32);

let sphereMaterial= new THREE.MeshNormalMaterial({ wireframe: true, transparent: true} );

let blet= newTHREE.Mesh( sphere, sphereMaterial );

blet.position.x= -10;

group.add( blet );//添加光

let light = new THREE.AmbientLight( 0x404040);

scene.add( light );//想要看到空间内的物体，需要调整一下距离和方位

camera.position.z = 100;//更新空间需要重新渲染

renderer.render(scene, camera);

Geometry对应有许多几何形状，大部分都进行封装，规则图形很好进行绘制，独特的图形也需要自己描点传入数据绘制，比如shape。

材料又分许多种，这里材料都用到wireframe，便于观察我们添加的物体的确是3D结构。

场景中有一个组，那么组内所有显示的3D对象都是在场景中的。而想要显示必须要确保视野对着物体，也就是camera的位置、角度都合适，然后有光才能看见材料的颜色。最后别忘了render一下。

这时候场景中是这样的：

好像3D想过也不是很明显，那么加上动画转一转，将两个物体延自身中心旋转：

window.requestAnimationFrame(functionanimate() {

requestAnimationFrame(animate);

box.rotation.x+= 0.01;

box.rotation.y+= 0.01;

blet.rotation.x+= 0.01;

blet.rotation.y+= 0.01;

renderer.render(scene, camera)

})

差不多这样吧：

更多用法参考：https://threejs.org/examples/

还是很有意思的。。