Question

在处理Webgl 3D项目时，我想使用每个纹理的按钮来更改已加载的COLLADA对象的纹理

到目前为止，我已经设法使用相同的代码对3种纹理进行了3次处理，这使我想到了一个问题：

如何使用单个事件侦听器来更改我拥有的纹理的数量

*****我的下面的代码很不错*****

这是我的代码：

<button type="submit" id="wd1" onclick="setMat1()" ><img src='tex/wd1.png'/></button> <button type="submit" id="wd2" onclick="setMat2()"><img src='tex/wd3.png'/></button> <button type="submit" id="wd3" onclick="setMat3()"><img src='tex/wd2.png'/></button>

还有

function setMat1 () { elf.traverse(function(child) { if (child instanceof THREE.Mesh){ var mat1 = textureLoader.load('obj/tex/wood3.png'); child.material.map = mat1; } elf.needsUpdate=true; }); } function setMat2 () { elf.traverse(function(child) { if (child instanceof THREE.Mesh){ var mat2 = textureLoader.load('obj/tex/wood5.png'); child.material.map = mat2; } //elf.geometry.uvsNeedUpdate = true; elf.needsUpdate=true; }); } function setMat3 () { elf.traverse(function(child) { if (child instanceof THREE.Mesh){ var mat3 = textureLoader.load('obj/tex/wood4.png'); child.material.map = mat3; } //elf.geometry.uvsNeedUpdate = true; elf.needsUpdate=true; }); }

我在这里问这个问题是因为我将添加至少20种其他纹理，老实说，我认为不应该像我那样做：）

Answer 1

您只需要输入以下内容即可更新材料：

child.material.needsUpdate = true;
child.material.map.needsUpdate = true;

有关更多示例，请点击此链接https://threejs.org/docs/index.html#api/materials/Material.needsUpdate

和https://threejs.org/docs/index.html#api/textures/Texture.needsUpdate

Answer 2

也许是这样？

function setMat(matUrl) {
 new THREE.TextureLoader().load(matUrl,(tex)=>{
     scene.traverse(function(child) {
         if (child instanceof THREE.Mesh){
             child.material.map = tex;
             child.material.needsUpdate = true;
         }
     });
 });
}

-或-下面是一个更为简洁的代码段，该代码段从被单击图像的src获取URL。

var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  45, // Field of view
  w / h, // Aspect ratio
  0.1, // Near
  10000 // Far
);
camera.position.set(15, 10, 15);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.PointLight(0xFFFF00);
light.position.set(20, 20, 20);
scene.add(light);
var light1 = new THREE.AmbientLight(0x808080);
light1.position.set(20, 20, 20);
scene.add(light1);
var light2 = new THREE.PointLight(0x00FFFF);
light2.position.set(-20, 20, -20);
scene.add(light2);
var light3 = new THREE.PointLight(0xFF00FF);
light3.position.set(-20, -20, -20);
scene.add(light3);

var sphereGeom = new THREE.SphereGeometry(5, 16, 16);
var material = new THREE.MeshLambertMaterial({
  color: 0x808080
});
var mesh = new THREE.Mesh(sphereGeom, material);
scene.add(mesh);
renderer.setClearColor(0xdddddd, 1);

function setMat(evt) {
  var src = evt.target.src ? evt.target.src : evt.target.children[0].src;
  new THREE.TextureLoader().load(src, (tex) => {
    scene.traverse(function(child) {
      if (child instanceof THREE.Mesh) {
        child.material.map = tex;
        child.material.needsUpdate = true;
      }
    });
  });
}

var buttons = document.getElementsByTagName('button'); 
for(var i=0;i<buttons.length;i++)buttons[i].onclick = setMat;
(function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
})();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

<button><image src="https://media.giphy.com/media/xThuWg7lusylvpAVu8/giphy.gif" width=100 height=100 >1</image></button>

<button><image src="https://res.cloudinary.com/teepublic/image/private/s--gWNjhADC--/t_Preview/b_rgb:262c3a,c_limit,f_auto,h_313,q_90,w_313/v1508184648/production/designs/1977157_1" width=100 height=100 >2</image></button>

<button><image src="https://media.giphy.com/media/xThuWg7lusylvpAVu8/giphy.gif" width=100 height=100 >3</image></button></br>

THREE.JS：如何使用具有功能的循环事件监听器更改对象纹理？

2 个答案: