CODEWITHSUNDEEP
javascripthtmlthree.js
Exotic
Exotic

Reputation: 35

Three js canvas not loading

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/[email protected]/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);

Upvotes: 1

Views: 741

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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 );

Upvotes: 2

Related Questions