三个js画布没有加载答案

【问题标题】：Three js canvas not loading三个js画布没有加载
【发布时间】：2022-02-04 20:01:13
【问题描述】：

我试图将三个 js 画布渲染到我的浏览器上，但它不会渲染。我将 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>

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

【问题讨论】：

在 js 脚本末尾添加 renderer.render(scene, camera); 看看奇迹 :) 但以防万一我会添加动画循环：renderer.setAnimationLoop(() => { renderer.render(scene, camera); }); 代替。

标签： javascript html three.js

【解决方案1】：

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

renderer.render( scene, camera );

【讨论】：