Hola, soy nuevo en threejs y estoy tratando de mostrar literalmente una esfera y no funciona. Solo quería probarlo y ver si tengo algo funcionando y no funciona. es debido a la importación de tres?
el código html está aquí
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { margin: 0; width: 100%; height: 100%; } </style> <script type="module" src="src/index.js"></script> </head> <body> </body>El código Javascript está aquí
import { Scene, PerspectiveCamera, WebGLRenderer, Color, ACESFilmicToneMapping, sRGBEncoding, Mesh, SphereGeometry, MeshBasicMaterial } from 'https://cdn.skypack.dev/three@0.137'; const scene = new Scene(); scene.background = new Color("#FFEECC"); const camera = new PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000); //camera.position.set(-17,31,33); camera.position.set(0, 0, 50); const renderer = new WebGLRenderer({antialias: true }) renderer.setSize(InnerWidth, innerHeight); renderer.toneMapping = ACESFilmicToneMapping; renderer.outputEncoding = sRGBEncoding; renderer.physicallyCorrectLights = true; document.body.appendChild(renderer.domElement); let sphereMesh = new Mesh( new SphereGeometry(5, 10, 10), new MeshBasicMaterial({ color: 0xff0000 }) ); scene.add(sphereMesh); (async function() { renderer.setAnimationLoop(() => { renderer.render(scene, camera); }); })();