Three.js立方体与每张脸上的不同纹理

Question

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

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

在这里看了几个关于SO和其他大量谷歌搜索的问题,尽管我得到了答案(实际上看起来相当简单),但我根本无法让它发挥作用.

我是three.js的新手,但不是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(材质)函数 - 材料未定义.这让我相信我的一个/所有材料定义中的某些东西是不正确的.

使用three.js r58.

实际上没有HTML或CSS,只有JS

我很高兴得到一个立方体在所有六个面上旋转相同的图像,但没有不同的图像.图像只是骰子点的图像,1 - 6.

如果需要的话,如果有更多的时间,我可以做一个小提琴

Answer 1

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

dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );

scene.add( dice );

小心从网上复制旧的例子.

请务必查看Migration Wiki以获取升级到当前版本的帮助.

three.js r.85