Threejs 场景在我的项目中不起作用/未定义三个答案

【问题标题】：Threejs Scene not working in my project / THREE not definedThreejs 场景在我的项目中不起作用/未定义三个
【发布时间】：2021-12-02 15:17:50
【问题描述】：

我想创建 m 前三个 js 项目并遵循教程。但是当我的页面加载时，没有出现任何场景。场景应该是完全黑色的，但站点只是白色的。

Chrome 浏览器控制台：

three.js:1 加载资源失败：net::ERR_FILE_NOT_FOUND main.js:1 Uncaught SyntaxError: 不能在模块外使用 import 语句

我的 vs 代码工作区；

我的html和js代码：

function main(){

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window,innerHeight);
    document.getElementById('webgl').appendChild(renderer.domElement);
    renderer.render(scene,camera);
}

main();

<!DOCTYPE html>

<html>
    <head>
        <title>Three js test</title>
        <style type="text/css">html, body {margin: 0; padding: 0; overflow: hidden;}</style>
    </head>
    <body>
        <div id="webgl"></div>
        <script src="/lib/three.js"></script>
        <script src="./main.js"></script>
    </body>
</html>

【问题讨论】：

检查浏览器控制台是否有错误和警告。
three.js:1 加载资源失败：net::ERR_FILE_NOT_FOUND main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

标签： javascript html web three.js

【解决方案1】：

<script src="lib/three.js"></script>

也许尝试从您的 three.js 路径中删除“/”？

【讨论】：

【解决方案2】：

我最终使用了 vs code 的实时服务器扩展并使用了 three.module.js。

使用它可以工作。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。