Im trying to render the three js canvas onto my browser but it wont render. Im using vite.js for live server. The path and everything is correct. No errors. But still wont work. Please give advice on this.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js">
</script>
</body>
</html>
JS
import * as THREE from "https://unpkg.com/three@0.137.5/build/three.module.js"
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000)
const renderer = new THREE.WebGLRenderer(
);
console.log(scene);
console.log(camera);
console.log(renderer);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
You should render at least a single frame to see a result on your HTML page. Add the following line at the end of your code listing:
renderer.render( scene, camera );