时间戳

首页 > 解决方案 > Threejs 场景在我的项目中不起作用/未定义三个

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

问题描述

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

Chrome 浏览器控制台：

three.js:1 加载资源失败：net::ERR_FILE_NOT_FOUND main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

我的 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>

标签： javascripthtmlwebthree.js

解决方案

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

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

推荐阅读