javascript 每个面具有不同纹理的 Three.js 立方体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17418118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js cube with different texture on each face
提问by OJay
I'm trying to create a three.js cube with different textures on each face.
我正在尝试在每个面上创建一个具有不同纹理的 Three.js 立方体。
Basically a dice. This is in my sandbox environment, so should just product a rotating cube with dice images (1-6) on each side. Once done I intend to use this for a browser base game. This example I have only tested in Chrome, although contemplating changing it to a canvas renderer for additional browser support.
基本上是一个骰子。这是在我的沙盒环境中，所以应该只制作一个旋转的立方体，每边都有骰子图像 (1-6)。完成后，我打算将其用于浏览器基础游戏。这个例子我只在 Chrome 中测试过，虽然考虑将它更改为画布渲染器以获得额外的浏览器支持。
Had a look at a few questions here on SO and a substantial amount of other googling, and though I had the answer (seemed reasonably simple actually) but I simply cannot get it to work.
看看这里关于 SO 的几个问题和大量其他谷歌搜索，虽然我有答案（实际上看起来相当简单）但我根本无法让它工作。
I am reasonably new to three.js, but not JavaScript.
我对three.js相当陌生，但不是JavaScript。
Pages I used for reference are
我用作参考的页面是
SO - three.js cube with different texture on each face
SO - three.js cube with different texture faces
and enriquemorenotent.com - three.js building a cube with different materials on each face
和enriquemorenotent.com -three.js 在每个面上构建一个具有不同材料的立方体
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);
}
The error I am getting is
我得到的错误是
Uncaught TypeError: Cannot read property 'map' of undefined
from three.js line 19546 (not the min version) WHichi is the bufferGuessUVType(material) function - material is undefined. Which leads me to believe something is not right in one/all of my material definitions.
来自three.js line 19546（不是最小版本）WHichi是bufferGuessUVType(material)函数 - 材料未定义。这让我相信在我的一个/所有材料定义中有些东西是不对的。
Using three.js r58.
使用three.js r58。
There is really no HTML or CSS, just the JS at this point
这里真的没有 HTML 或 CSS，只有 JS
I can quite happily get a cube rotating with the same image on all six sides but not with different images. The images are just the images of a dice dots, 1 - 6.
我可以很高兴地得到一个立方体旋转，在所有六个边上都有相同的图像，但不是不同的图像。图像只是骰子点的图像，1 - 6。
Given a bit more time I could do a fiddle if required
给我一点时间，如果需要，我可以做一个小提琴
回答by WestLangley
EDIT: THREE.MultiMaterialhas been deprecated. You can now pass the materials array directly into the constructor. Like so:
编辑：THREE.MultiMaterial已被弃用。您现在可以将材料数组直接传递给构造函数。像这样：
dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );
scene.add( dice );
Be careful of copying old examples from the net.
小心从网上复制旧的例子。
Always check the Migration Wikifor help upgrading to the current version.
请务必查看迁移 Wiki以获取升级到当前版本的帮助。
three.js r.85
三.js r.85
