Cada vez que intento cargar texturas con el siguiente código, no aparece ningún error y aparece una pantalla en negro.
aquí está el javascript, el nombre del archivo es 3d_stuff.js
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 ); const geometry = new THREE.PlaneGeometry( 16, 16); const texture = new THREE.TextureLoader().load( '/vaporwater.jpg' ); const material = new THREE.MeshBasicMaterial( { map: texture} ); //const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} ); const plane = new THREE.Mesh( geometry, material ); scene.add( plane ); camera.position.z = 3 ; camera.position.y = -1 camera.rotation.x = -30 function animate() { renderer.render( scene, camera ); }; animate();aquí está el índice.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="three.js"></script> <script src="3d_stuff.js"></script> </body> </html>alguien sabe que pudo haber salido mal
Estoy ejecutando el servidor en ubuntu usando el comando python3 -m http.server por cierto
En realidad, prueba esto primero:
Nota: la importación del script js es de tipo módulo
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118/build/three.module.js'; let camera, scene, renderer; let geometry, material; init(); function init() { camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); camera.position.z = 1; scene = new THREE.Scene(); //get texture add path to image const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('https://picsum.photos/200/300'); texture.encoding = THREE.sRGBEncoding; const geometry = new THREE.PlaneGeometry(1, 1); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide }); const plane = new THREE.Mesh(geometry, material); scene.add(plane); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setAnimationLoop(animation); document.body.appendChild(renderer.domElement); } function animation(time) { renderer.render(scene, camera); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <!--note that the script tag is of type module--> <script src="./3d_stuff.js" type="module"> </script> </body> </html>