Estoy tratando de hacer un modelo del planeta tierra, pero la textura no carga y no se porque pasa esto, trate de cambiar el formato de la imagen y tambien usarla como enlace de exportacion y sigue sin funcionar trabajar.
mi código:
import * as THREE from 'https://cdn.skypack.dev/three@0.134.0' const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer( ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const sphere = new THREE.Mesh( new THREE.SphereGeometry(5, 50, 50), new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('.img/global.jpeg') }) ); scene.add(sphere); camera.position.z = 15; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();Mi primera sugerencia es que divida su código en pasos individuales para que pueda identificar dónde se está produciendo el error. Además, TextureLoader.load() tiene algunas funciones de devolución de llamada que pueden ayudarlo a determinar si la carga se realizó correctamente o si falló:
const geom = new THREE.SphereGeometry(5, 50, 50); const texLoader = new THREE.TextureLoader(); const texture = texLoader.load( // Location '.img/global.jpeg', // On success function(texture) { console.log("Success!"); console.log(texture); }, // Progress (ignored) undefined, // On error function(err) { console.log("Error"); console.log(err); } ); const mat = new THREE.MeshBasicMaterial({map: texture}); const sphere = new THREE.Mesh(geom, mat);Luego puede verificar su consola para ver qué se muestran los registros.