我一直想在一个项目中使用Three.js,但我无法在我的屏幕上呈现任何东西.

经过一段时间的故障排除后,我想我应该问问看有没有人能帮我.

详细信息: 在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>

我在这里通过CDN链接,但其他方法,如用NPM安装和以那种方式链接也得到了同样令人困惑的结果. 无论如何,它没有抛出任何错误,所以我感到不知所措.

我最终得到的只是一张空白的白页.

推荐答案

函数main()不会调用它自己.当你声明一个函数时,你必须确保你执行了它,否则它就会被搁置在那里,不被使用.

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

// Then we call the function
main();

Javascript相关问答推荐

将数据从strapi提取到next.js,但响应延迟API URL

如何通过在提交时工作的函数显示dom元素?

Klaro与Angular的集成

没有输出到带有chrome.Devtools扩展的控制台

docx.js:如何在客户端使用文档修补程序

在网页上添加谷歌亵渎词

如何从html元素创建树 struct ?

用于编辑CSS样式的Java脚本

在运行时使用Next JS App Router在服务器组件中运行自定义函数

连接到游戏的玩家不会在浏览器在线游戏中呈现

为什么客户端没有收到来自服务器的响应消息?

如何 for each 输入动态设置输入变更值

是否可以将Select()和Sample()与Mongoose结合使用?

是否可以将异步调用与useState(UnctionName)一起使用

在JS/TS中将复杂图形转换为数组或其他数据 struct

如果NetSuite中为空,则限制筛选

不协调嵌入图片

在单击按钮时生成多个表单时的处理状态

rxjs在每次迭代后更新数组的可观察值

Django模板中未加载JavaScript函数