Dressing a cube with images does not work for me, mapping textures

Questions
1

cube
cube1440×778 27.2 KB

all
all1136×426 46.4 KB 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hola Mundo Cubo 3D</title>
    <style>
        body{ margin: 0;}
        canvas{ width: 100%; height: 100%;}
    </style>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script type="module" src="./script.js"></script>
</body>
</html>

import * as THREE from './three.module.js'

 // Lienzo
const canvas = document.querySelector('canvas.webgl')

// Escena
const scene = new THREE.Scene();

// Color Fondo de la Escena
scene.background = new THREE.Color('gray')

// Tamaños
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const geometry = new THREE.BoxBufferGeometry(2,2,2);

const textureCube =
[
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado1.png'), side: THREE.FrontSide } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado2.png'), side: THREE.FrontSide } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado3.png'), side: THREE.FrontSide } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado4.png'), side: THREE.FrontSide } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado5.png'), side: THREE.FrontSide } ),
    new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load('./dado6.png'), side: THREE.FrontSide } )
]

const cubeTexture = new THREE.MeshBasicMaterial( { map: textureCube } );

// Camara
const camera = new THREE.PerspectiveCamera(
    75, window.innerWidth/window.innerHeight,
    0.5, 1000
);
camera.position.y = 2;
camera.position.z = 5;

// Renderizador
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// Suelo
const meshFloor = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(20, 20, 20,20),
    new THREE.MeshStandardMaterial({
        color:0x202020,
        wireframe: true
        //side: THREE.DoubleSide
        //side: THREE.FrontSide
        //side: THREE.BackSide
    })
);

// Girar el piso 90 grados 
meshFloor.rotation.x -= Math.PI / 2;
scene.add(meshFloor);

let boxhouses = new THREE.Mesh(geometry, cubeTexture);
boxhouses.position.set(2,3,2); // XYZ
scene.add(boxhouses);

// Funcion para generar el movimiento 3D
function animate(){
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}

animate();
2

The solution is:

const loader = new THREE.TextureLoader();

const material = [
    new THREE.MeshBasicMaterial( { map: loader.load('./dado1.png') } ),
    new THREE.MeshBasicMaterial( { map: loader.load('./dado2.png') } ),
    new THREE.MeshBasicMaterial( { map: loader.load('./dado3.png') } ),
    new THREE.MeshBasicMaterial( { map: loader.load('./dado4.png') } ),
    new THREE.MeshBasicMaterial( { map: loader.load('./dado5.png') } ),
    new THREE.MeshBasicMaterial( { map: loader.load('./dado6.png') } )
];

//

let boxhouses = new THREE.Mesh(geometry, material);
2 Likes
3

ruler
ruler1440×617 27.8 KB

thanks now it works! :), Blessings

1 Like
4

Related:

In the Collection of examples from discourse.threejs.org

BeginnerExample
// … step 04: use a texture for the material (see also step 5 ropeMaterial)