Three.js canvas 似乎没有呈现，没有错误

Question

I've been wanting to use Three.js in a project but I can't get anything to render on my screen.我一直想在项目中使用 Three.js，但我无法在屏幕上渲染任何内容。

After a while of troubleshooting, I thought I would just ask and see if anyone can help me.经过一段时间的故障排除后，我想我会问一下，看看是否有人可以帮助我。

DETAILS: Hosting on XAMPP, here's a complete Three.js example that should work, to my knowledge, but evidently does not:详细信息：托管在 XAMPP 上，这是一个完整的 Three.js 示例，据我所知，它应该可以工作，但显然不能：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c"></canvas>
    <script type="module">
    import {
        Camera,
        Material,
        Texture,
      } from "https://cdn.skypack.dev/three@0.132.2";
      
      import { OrbitControls } from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";
      function main() {
          const canvas = document.getElementById('c');
          const renderer = new THREE.WebGLRenderer({canvas});
          const fov = 75;
          const aspect = 2;  // the canvas default
          const near = 0.1;
          const far = 5;
          const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
          camera.position.z = 2;
          const scene = new THREE.Scene();
          const boxWidth = 1;
          const boxHeight = 1;
          const boxDepth = 1;
          const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
          const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
          const cube = new THREE.Mesh(geometry, material);
          scene.add(cube);
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.render(scene, camera);
      }
    </script>
</body>
</html>

I've linked through a cdn here, but other methods such as installing with npm and linking that way have also had the same confounding results.我在这里通过 CDN 进行了链接，但其他方法（例如使用 npm 安装并以这种方式链接）也具有相同的混淆结果。 In any case it's not throwing any errors, so I'm at a loss.无论如何，它没有抛出任何错误，所以我很茫然。

All I end up getting is a blank white page.我最终得到的只是一张空白的白页。

Answer 1

The function main() is not gonna call itself. function main()不会调用自己。 When you declare a function, you have to make sure you execute it, otherwise it'll just sit there, unused.当你声明一个 function 时，你必须确保你执行它，否则它只会坐在那里，未被使用。

// First we declare the function
function main() {
    // Do a bunch of stuff
}

// Then we call the function
main();

Three.js canvas 似乎没有呈现，没有错误

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-27 02:13:31

Three.js canvas 似乎没有呈现，没有错误

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-27 02:13:31

解决方案1
0 已采纳 2022-08-27 02:13:31