Textura cargando como negro. Intenté ejecutar el archivo .html a través de un servidor local (Servez), pero ese no parece ser el problema. Estoy usando el código de Visual Studio. El código parece funcionar bien, la consola no muestra ningún error.
Este es mi código:
window.onload = function() { //Define the WebGL renderer: var renderer = new THREE.WebGLRenderer(); //specify the we will use WebGL renderer.setSize( 800, 600 ); //scene size (Width, Height) document.body.appendChild( renderer.domElement ); //Initialize (create) the scene: var scene = new THREE.Scene(); //Define the camera: var camera = new THREE.PerspectiveCamera( 35, // Field of view 800 / 600, // Aspect ratio 0.1, // Near plane 10000 // Far plane ); camera.position.x= 0; //default value anyway camera.position.y= 0; //default value anyway camera.position.z = 300; camera.lookAt( scene.position ); //Define the objects for the scene: var skygeo = new THREE.SphereGeometry(150, 40, 20); var skytexture = new THREE.TextureLoader().load("sky.jpg"); var skymat = new THREE.MeshBasicMaterial({map:skytexture}); skymat.side = THREE.Backside; var skydome = new THREE.Mesh(skygeo, skymat); scene.add(skydome); // create a point light: var pointLight = new THREE.PointLight(0xFFFFFF); // set the light position: pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 100; // add the light to the scene: scene.add(pointLight); // it renders the scene: renderer.render( scene, camera ); };Encontré aquí ( https://discourse.threejs.org/t/texture-loading-not-working-on-server/14910/10 ) que puede deberse a que los archivos de imagen estaban dañados. También encontré en otro lugar que puede deberse a extensiones del navegador como AdBlock, pero eliminar las extensiones no solucionó el problema.
¿Cuál es la razón para esto?
Estás llamando a renderer.render( scene, camera ); solo una vez, inmediatamente después de inicializar su cargador de texturas. La carga de texturas es asincrónica, lleva algo de tiempo, por lo que está renderizando la escena antes de que se cargue la textura. Debe llamar a render después de que su textura haya terminado de cargarse. Para hacer esto, puede usar la devolución de llamada onLoad , o puede ver los documentos básicos sobre la creación de una escena para ver un ejemplo de cómo renderizar continuamente:
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();