三个 js canvas 未加载

Question

我试图将三个 js canvas 呈现到我的浏览器上，但它不会呈现。我使用 vite.js 作为实时服务器。路径和一切都是正确的。没有错误。但还是不行。请对此提出建议。

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

Answer 1

您应该至少渲染一个帧才能在 HTML 页面上看到结果。在代码清单的末尾添加以下行：

renderer.render( scene, camera );

三个 js canvas 未加载

Three js canvas not loading

html

javascript

three.js