Threejs-关于变更的设置

为了提高性能，threejs默认物体的形状和材质一经创建，就永不改变。
所以，修改物体的形状和材质，就需要手动告诉threejs，方法就是使用各种computeXXX方法和needsUpdate属性。

相机变更

相机位置更新:

需要重新设置相机的位置，还需要重新渲染

camera.position.set(x, y, z);
//渲染
renderer.render(scene, camera);

注意事项：
很多时候因为有个动画设置,所以以为只需要设置位置，投影就直接更新了，实际情况是必须执行重新渲染才能看到投影发生变更，
即当位置发生变更后因为动画中的渲染导致以为直接设置位置变更投影就变更了

var animate = function() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
};
animate();

相机的视角、纵横比等发生变更：

初始化设置

var camera = new THREE.PerspectiveCamera(fov, aspect,near, far);

变更设置

camera.fov = fov;//视野角重新设置
camera.aspect = aspect;//纵横比重新设置
camera.near = near;//相机离视体积最近的距离重新设置
camera.far = far;//相机离视体积最远的距离重新设置
//变更后必须使用以下方法更新相机的投影矩阵
camera.updateProjectionMatrix();
//渲染
renderer.render(scene, camera);

若是动画中已经设置了不断的重新渲染，此处可以不再设置渲染

光源

位置更新：

首先判断物体能够产生阴影后，当光源位置发生变更后，不仅需要重新设置光源位置，还需要重新渲染

light.position.set(lightX, lightY, lightZ);
renderer.render(scene, camera);

几何体

颜色变更：

var material = new THREE.MeshPhongMaterial({
    color: 0x00ff00
});
$("#color").change(function(){
    var color=$("#color").val();
    var list=color.split("#");
    var rel="0x"+list[1];
    material.color.setHex(rel)
    //不停循环的动画已经是在不断渲染 因此无需在添加一个渲染
    //renderer.render( scene, camera );

});

注意事项
颜色设置问题
设置为选中的颜色，但是重新渲染后发现有些颜色与选择的颜色不一致
原因：受到光源的影响，最终展示出来的颜色是光源与选择颜色综合出来的颜色
若是想要展示为选择的颜色，需要将光源的颜色设置为白色0xffffff

大小变更：

不同几何体的变更方法不完全相同，先列出部分已知的变更几何体方法
几何体：BoxBufferGeometry

cube.scale.set(width,width,width);

形状变更

各种computeXXX方法

材质变更

暂时未找到材质变更方法

删除对象

scene.remove(sphere);