0
469
Views¿Cómo crear una esfera con mapa mundial usando tres.js?
Estaba haciendo una esfera con un mapa mundial usando three.js pero el resultado es solo una pantalla negra como se muestra.
El código que usé es:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set( 0, 0, 50 ); camera.lookAt( 0, 0, 0 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.SphereGeometry( 15, 32, 16 ); const texture = new THREE.TextureLoader().load( 'C:\Users\pc\Desktop\Lines\land_ocean_ice_cloud_2048.jpg' ); const material = new THREE.MeshBasicMaterial( { map: texture } ); const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); function animate() { requestAnimationFrame( animate ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html>No pude explicar por qué el código no pudo representar la esfera. ¿Qué salió mal?
1 answers
Answer question0
Este es el código correcto.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set( 0, 0, 50 ); camera.lookAt( 0, 0, 0 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.SphereGeometry( 15, 32, 16 ); const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/kFoWvzw.jpg' ); const material = new THREE.MeshBasicMaterial( { map: texture } ); const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); function animate() { requestAnimationFrame( animate ); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </html> Nunca pensé que descargar la fuente y la imagen de Internet y renderizarla en un navegador web es imposible. La fuente y la imagen que se debe representar en el navegador web deben provenir de Internet y vincularla al código a través del comando <source> y <texture> utilizando la URL de Internet.
Lo que es más sorprendente es que una vez que la fuente y la imagen que proviene de Internet a través de la URL de Internet se han renderizado en el navegador web, ¡funciona incluso sin Internet!