Este es mi cubo con textura:
const textureLoader: TextureLoader = new TextureLoader(); const textureArray: MeshBasicMaterial[] = [ new MeshBasicMaterial({ map: textureLoader.load("./model/front.jpeg") }), new MeshBasicMaterial({ map: textureLoader.load("./model/back.jpeg") }), new MeshBasicMaterial({ map: textureLoader.load("./model/top.jpeg") }), new MeshBasicMaterial({ map: textureLoader.load("./model/bottom.jpeg") }), new MeshBasicMaterial({ map: textureLoader.load("./model/left.jpeg") }), new MeshBasicMaterial({ map: textureLoader.load("./model/right.jpeg") }), ]; textureArray.forEach((_, index) => { textureArray[index].side = BackSide; }); const cubeGeometry: BoxGeometry = new BoxGeometry(5, 5, 5); const cube: Mesh = new Mesh(cubeGeometry, textureArray); scene.add(cube);No tengo errores y la pantalla es negra. ¿qué ocurre?
Mi empaquetador es paquetería
Pruébalo así:
let camera, scene, renderer; let mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 4; scene = new THREE.Scene(); const textureLoader = new THREE.TextureLoader().setPath('https://threejs.org/examples/textures/cube/Bridge2/'); const materials = [ new THREE.MeshBasicMaterial({ map: textureLoader.load("negx.jpg") }), new THREE.MeshBasicMaterial({ map: textureLoader.load("negy.jpg") }), new THREE.MeshBasicMaterial({ map: textureLoader.load("negz.jpg") }), new THREE.MeshBasicMaterial({ map: textureLoader.load("posx.jpg") }), new THREE.MeshBasicMaterial({ map: textureLoader.load("posy.jpg") }), new THREE.MeshBasicMaterial({ map: textureLoader.load("posz.jpg") }), ]; materials.forEach((_, index) => { materials[index].side = THREE.BackSide; }); const cubeGeometry = new THREE.BoxGeometry(); mesh = new THREE.Mesh(cubeGeometry, materials); scene.add(mesh); // renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } body { margin: 0; } <script src="https://cdn.jsdelivr.net/npm/three@0.139.2/build/three.min.js"></script>