Acabo de crear una nueva aplicación con npm y comencé a aprender three.js. No sé si eliminé algo accidentalmente, pero el navegador sigue dando error. (VM80:6770 crbug/1173575, archivos de módulo que no son JS en desuso).
import './style.css' import * as THREE from 'three'; import { BoxGeometry } from 'three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/ window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg'), }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(innerWidth/innerHeight); camera.position.setZ(30); renderer.render(scene, camera); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial( {color: red, wireframe: true} ) ; const cube = new THREE.Mesh(geometry, material); scene.add(cube); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();HTML:
<body> <canvas id="bg"></canvas> <div id="app"></div> <script type="module" src="/main.js"></script> </body>editar: de alguna manera se solucionó un poco, pero Chrome todavía da errores.
captura de pantalla actualizada
edición 2: creé una nueva aplicación nuevamente y cuando la rendericé, la página me dio esto: 
Lo arreglé. En la última versión, npm crea una 'aplicación' automática y seguí eliminándola. Debería incluir la etiqueta 'canvas' allí. eso fue todo