为什么我的 THREE.js 文档框不起作用？答案

【问题标题】：Why is my THREE.js Documentation Box isn't working?为什么我的 THREE.js 文档框不起作用？
【发布时间】：2021-12-30 22:19:11
【问题描述】：

我是一名尝试学习 THREE.js 的初学者，我浏览了 THREE.js 文档并尝试编写代码，但是当我运行我的 HTML 页面时是空的，我不知道该做什么，我使用 Visual Studio 代码进行编码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script>
      // Our Javascript will go here.
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      const animate = function () {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

【问题讨论】：

标签： javascript html visual-studio-code three.js

【解决方案1】：

您的代码有效，我所做的唯一更改是通过CDN 插入库。

您在本地拥有“three.js”脚本，因此请确保该文件位于 js 文件夹中，并且该文件夹位于您网站的根目录中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      // Our Javascript will go here.
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      const animate = function () {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>

【讨论】：

我使用了内联脚本，所以它可以工作，或者我不明白你提到的内容
你能详细解释一下吗
我的代码和你的一样，除了这一行：<script src="js/three.js"></script>。我从外部站点加载库，它可以工作。所以我想你的问题是由于加载了 three.js 文件。尝试按 F12（在 chrome 上），开发者控制台，您可能会看到“找不到文件”错误。