soy un poco novato cuando se trata de three.js y html, pero he creado otros archivos js y se importarían a la página html muy bien, pero estoy confundido por qué mi código de pasta de copia de cuadro básico no aparece en la página. funciona bien cuando se escribe todo en html, pero no cuando se importa el archivo js en la misma carpeta. ¿Podrían ayudarme a entender qué está pasando?
índice.js
/*import * as THREE from 'three' const canvas=document.querySelector('.webgl') const scene = new THREE.Scene(); const geo = new THREE.BoxGeometry(1,1,1) const mats = new THREE.MeshBasicMaterial({ color:'red' }) const boxmesh=new THREE.Mesh(geo,mats) scene.add(boxmesh) const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,100) camera.position.set(0,1,2) scene.add(camera) const renderer=new THREE.WebGL1Renderer({ canvas:canvas }) renderer.setSize(window.innerWidth,window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)) renderer.shadowMap.enabled=true renderer.gammaOutput=true renderer.render(scene, camera)*/ import * as THREE from 'three'; // init const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); camera.position.z = 1; const scene = new THREE.Scene(); scene.background= new THREE.Color('black') const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animation ); document.body.appendChild( renderer.domElement ); // animation function animation( time ) { mesh.rotation.x = .1; mesh.rotation.y = .1; renderer.render( scene, camera ); } animation()índice.html
<!DOCTYPE html> <html> <head> <meta name="learning html" content="This is learing making websites"> <title>Learing GLTF</title> <script src="index.js"></script> </head> <body> <canvas class="webgl"></canvas> ? </body> </html>Al usar las últimas versiones de three.js (p. ej., r140 ), es importante definir un mapa de importación en su HTML. De lo contrario, import import * as THREE from 'three'; No funciona. Se requiere un mapa de importación para que el especificador de módulo desnudo three pueda resolverse en los navegadores. Para probar, pruébalo con:
<script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.140/build/three.module.js" } } </script>