IT技术 - 每个面具有不同纹理的 Three.js 立方体 - 吾爱随笔录

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

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

看看这里关于 SO 的几个问题和大量其他谷歌搜索，虽然我有答案（实际上看起来相当简单）但我根本无法让它工作。

我对three.js相当陌生，但不是JavaScript。

我用作参考的页面是

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

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

evanz - 测试三个.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 line 19546（不是最小版本）WHichi是bufferGuessUVType(material)函数 - 材料未定义。这让我相信在我的一个/所有材料定义中有些东西是不对的。

使用three.js r58。

这里真的没有 HTML 或 CSS，只有 JS

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

给我一点时间，如果需要，我可以做一个小提琴