0
159
ViewsI can't run my app with Vite. What should I do?
I just created a new app with npm and started to learn three.js . I don't know if I deleted something accidentally but the browser keeps giving an error. (VM80:6770 crbug/1173575, non-JS module files deprecated.)
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>
edit: it somehow a bit fixed but chrome still gives errors.
edit 2:
I created new app again and when I render it, the page gave me this:
·
Juan Pablo Isaza
1 answers
Answer question0
I fixed it. In the last version, npm creates an automatic 'app' and I kept deleting it. I should include 'canvas' tag in there. That was all it
·
Juan Pablo Isaza
Report
Answer question