我正在尝试创建一个 Three.js 立方体,每个面上都有不同的纹理。
基本上是一个骰子。这是在我的沙盒环境中,因此应该只生成一个旋转立方体,每侧都有骰子图像 (1-6)。完成后,我打算将其用于浏览器基础游戏。这个例子我只在 Chrome 中进行了测试,尽管考虑将其更改为画布渲染器以获得额外的浏览器支持。
看了一些关于 SO 的问题和大量其他谷歌搜索,虽然我有了答案(实际上看起来相当简单),但我根本无法让它发挥作用。
我对 Three.js 相当陌生,但对 JavaScript 不太熟悉。
我用来参考的页面是
SO - Three.js 立方体每面都有不同的纹理 https://stackoverflow.com/questions/11961288/three-js-cube-with-different-texture-on-each-face-how-to-hide-edges-vertices
SO - 具有不同纹理面的 Three.js 立方体 https://stackoverflow.com/questions/13053687/threejs-cube-with-different-texture-faces-lit-by-point-light-with-canvas-rendere
evanz - 测试 Three.js 立方体 http://www.evanz.net/threejs/test_threejs.html
and enriquemorenotent.com - Three.js 构建一个立方体,每个面上都有不同的材料 http://enriquemorenotent.com/three-js-building-a-cube-with-different-materials-on-each-face/
My Code
var camera, scene, renderer, dice;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(110, 110, 250);
camera.lookAt(scene.position);
scene.add(camera);
var materials = [
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-1-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-2-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-3-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-4-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-5-hi.png')
}),
new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('/Content/Images/dice-6-hi.png')
})
];
dice = new THREE.Mesh(
new THREE.CubeGeometry(562, 562, 562, 1, 1, 1, materials),
new THREE.MeshFaceMaterial());
scene.add(dice);
}
function animate() {
requestAnimationFrame(animate);
dice.rotation.x += .05;
dice.rotation.y += .05;
dice.rotation.z += .05;
renderer.render(scene, camera);
}
我得到的错误是
Uncaught TypeError: Cannot read property 'map' of undefined
来自 Three.js 第 19546 行(不是最小版本) WHichi 是 bufferGuessUVType(material) 函数 - 材质未定义。这让我相信我的一个/所有材料定义中有些东西是不正确的。
使用三.js r58。
实际上没有 HTML 或 CSS,此时只有 JS
我可以很高兴地得到一个立方体,其六个面都旋转相同的图像,但不能旋转不同的图像。这些图像只是骰子点 1 - 6 的图像。
如果需要的话,再多一点时间我可以做小提琴