web-dev-qa-db-fra.com

Cube Three.js avec une texture différente sur chaque face

J'essaie de créer un cube three.js avec différentes textures sur chaque face.

Fondamentalement, un dé. Ceci est dans mon environnement sandbox, donc il suffit de produire un cube rotatif avec des images de dés (1-6) de chaque côté. Une fois cela fait, j'ai l'intention de l'utiliser pour un jeu de base par navigateur. Cet exemple, je ne l'ai testé que dans Chrome, bien que j'envisage de le changer en un rendu de canevas pour une prise en charge supplémentaire du navigateur.

J'ai jeté un coup d'œil à quelques questions ici sur SO et une quantité substantielle d'autres googler, et bien que j'aie eu la réponse (semblait assez simple en fait) mais je ne peux tout simplement pas le faire fonctionner.

Je suis relativement nouveau sur three.js, mais pas en JavaScript.

Les pages que j'ai utilisées comme référence sont

SO - cube three.js avec une texture différente sur chaque face

SO - cube three.js avec différentes faces de texture

evanz - Test du cube three.js

et enriquemorenotent.com - three.js construisant un cube avec différents matériaux sur chaque face

Mon 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);
}

L'erreur que je reçois est

Uncaught TypeError: Cannot read property 'map' of undefined

à partir de la ligne three.js 19546 (pas la version min) WHichi est la fonction bufferGuessUVType (matériau) - le matériau n'est pas défini. Ce qui m'amène à croire que quelque chose ne va pas dans une/toutes mes définitions matérielles.

Utilisation de three.js r58.

Il n'y a vraiment pas de HTML ou CSS, juste le JS à ce stade

Je peux très bien faire tourner un cube avec la même image sur les six côtés mais pas avec des images différentes. Les images ne sont que les images d'un point de dés, 1 - 6.

Étant donné un peu plus de temps, je pourrais faire un violon si nécessaire

javascriptthree.js
29
OJay

ÉDITER: THREE.MultiMaterial est obsolète. Vous pouvez maintenant passer le tableau des matériaux directement dans le constructeur. Ainsi:

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

scene.add( dice );

Faites attention de ne pas copier d'anciens exemples sur le net.

Vérifiez toujours le Migration Wiki pour obtenir de l'aide sur la mise à niveau vers la version actuelle.

three.js r.85

32
WestLangley