Three.js 凹凸贴图未更新
Three.js bump map not updating
我有一个 .obj
模型,在我的场景中加载了相应的 .mtl
文件。我在加载后对其应用 bumpMap
:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
这按预期工作。 map
纹理只是一张黑白 .png
图像。但是,如果我不只是在添加模型之前应用 bumpMap
,它就不会应用。例如,使用此代码,bumpMap
未应用于模型:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
setTimeout(function(){
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
}, 0);
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
只是添加超时,[=15=] 不再适用。在应用 bumpMap
之后添加 model.bumpMap.needsUpdate = true;
不会改变任何内容。
至少渲染一次 material 之后,添加以前不存在的纹理 需要构建新的着色器程序。要强制执行此操作,您需要设置
mesh.material.needsUpdate = true;
请参阅 three.js 文档 How to Update Things。
three.js r.85
我有一个 .obj
模型,在我的场景中加载了相应的 .mtl
文件。我在加载后对其应用 bumpMap
:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
这按预期工作。 map
纹理只是一张黑白 .png
图像。但是,如果我不只是在添加模型之前应用 bumpMap
,它就不会应用。例如,使用此代码,bumpMap
未应用于模型:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
setTimeout(function(){
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
}, 0);
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
只是添加超时,[=15=] 不再适用。在应用 bumpMap
之后添加 model.bumpMap.needsUpdate = true;
不会改变任何内容。
至少渲染一次 material 之后,添加以前不存在的纹理 需要构建新的着色器程序。要强制执行此操作,您需要设置
mesh.material.needsUpdate = true;
请参阅 three.js 文档 How to Update Things。
three.js r.85