Three.js 单击按钮时更改纹理或颜色

标签 three.js

我的 jQuery:

<script type="text/javascript">
$(document).ready(function(){

$("#button").click(function(){
cube[0].mesh.material.uniforms.texture.value = THREE.ImageUtils.loadTexture("textures/envmap.png");
cube[0].mesh.material.uniforms.texture.needsUpdate = true;
});

});
</script>

我有一个立方体数组,我希望能够在单击 #button div 时更改立方体的纹理。

点击 div 时,我在 chrome 中收到此错误:

Uncaught TypeError: Cannot read property 'material' of undefined 

如何更改作为 THREE.CubeGeometry 对象的立方体 [0] 的纹理或颜色。

我这里有一个 JS fiddle : http://jsfiddle.net/SCXNQ/559/

最佳答案

按照这个例子:http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

使用console.log调试您的应用程序,您正在尝试访问不存在的对象,例如cube[0]或cube.mesh。您可以使用cube.material 获取 Material 。没有制服数组,因为您使用的是 MeshBasicMaterial。

needsUpdate=true 应该在纹理的 onload 监听器中触发。

关于Three.js 单击按钮时更改纹理或颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15310026/

相关文章:

javascript - 如何在csg操作后保持原始颜色(使用ThreeCSG.js)

javascript - 调整窗口大小但保持缩放级别

javascript - 如何在三个js中为子网格添加轮廓

javascript - 使用 Three.js 程序生成粒子纹理

javascript - starsGeometry[0].setAttribute 不是函数

javascript - 如何在充满蒙皮网格的场景中使用实例化来优化性能?

javascript - Three.js - 多次调用JSON模型

javascript - 三个js : Visible light for spotlight

javascript - Three.js 光线转换和将对象放置在平面上方不起作用

javascript - 使用 three.js 自定义形状