每个面具有不同纹理的 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 - 三具有不同纹理面的 .js 立方体

evanz - 测试three.js立方体

和 enriquemorenotent.com -三.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)函数 - 材料未定义.这让我相信在我的一个/所有材料定义中有些东西是不对的.

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.

始终查看 Migration Wiki 以获取升级到当前版本的帮助.

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

three.js r.85

three.js r.85

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