three.js 开发中遇到的坑

时间:2021-07-13 04:17:16
  1. 材质动态更新中应该注意的问题

    在第一创建Matrial对象的时候需要先给Material的map赋值,可以赋予一个不携带
    url的Texture对象。如果你不赋值,等到第一次render之后,及时你再次给map赋 值一个Texture对象,这时候也是不会正确显示材质的
    (除非你手动指定material的needsUpdate为true)

//下面给出代码示例:
var start = new GSThree.StartNB();
start.autoRender();
var scene = start.newScene("main");
new GSThree.LightConfig(scene).addAmbientLight().addDirectionLight();

var box = new THREE.BoxBufferGeometry(100, 100, 100);
var material = new THREE.MeshStandardMaterial({
// map: new THREE.Texture()//如果不初始化的话,也不指定needsUpdate的话,后面及时设置了map的值,材质也不会更新
}
)
var mesh = new GSThree.Mesh(box, material)
scene.add(mesh);

function updateTextureMap() {
var texture = new THREE.TextureLoader().load("../../../resource/UV_Grid_Sm.jpg")
material.map = texture;
console.log("call update texture map")

material.needsUpdate = true;//材质会更新
}

setTimeout(updateTextureMap, 500);