Three.js立方体与每张脸上的不同纹理 [英] Three.js cube with different texture on each face

问题描述

我正在尝试在每张脸上创建一个具有不同纹理的three.js立方体。

I'm trying to create a three.js cube with different textures on each face.

基本上是一个骰子。这是在我的沙盒环境中，所以应该只在每侧产生一个带有骰子图像（1-6）的旋转立方体。完成后，我打算将其用于浏览器基础游戏。这个例子我只在Chrome中测试过，虽然考虑将其更改为画布渲染器以获得额外的浏览器支持。

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.

这里有关于SO和实质性的一些问题。其他谷歌搜索的数量，虽然我有答案（实际上似乎相当简单）但我根本无法让它工作。

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.

我对three.js来说相当新，但不是JavaScript。

I am reasonably new to three.js, but not JavaScript.

我用作参考的页面是

SO - three.js立方体，每个面上有不同的纹理

SO - 具有不同纹理面的three.js立方体

evanz - 测试three.js立方体

和 enriquemorenotent.com - three.js在每张脸上构建一个不同材质的立方体

我的代码

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（材料）函数 - 材料未定义。这导致我相信我的一个/所有材料定义中的某些内容不正确。

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 r58。

Using three.js r58.

实际上没有HTML或CSS，只有JS在这一点上

There is really no HTML or CSS, just the JS at this point

我可以很高兴地获得一个在所有六个方面都使用相同图像旋转的立方体但是没有不同的图像。图像只是骰子点的图像，1 - 6.

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.

如果需要的话我可以做一点小提琴

Given a bit more time I could do a fiddle if required

推荐答案

编辑： THREE.MultiMaterial 已被弃用。您现在可以将材质数组直接传递给构造函数。像这样：

THREE.MultiMaterial has been deprecated. You can now pass the materials array directly into the constructor. Like so:

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.

请务必查看迁移Wiki 以获取升级到当前版本的帮助版本。

Always check the Migration Wiki for help upgrading to the current version.

three.js r.85

three.js r.85

这篇关于Three.js立方体与每张脸上的不同纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！