Three.js 场景不是构造函数

Question

我正在尝试用一些 Three.js 制作一个简单的场景来进行试验，但我目前遇到了一个未知问题。

在资源管理器控制台中，它一直说 Three.Scene() 不是构造函数，无论我是导入下载的 Three 还是使用 cdnjs。

import * as Three from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js';


let scene, camera, renderer, cube;

function init() {
    scene = new Three.Scene();
    camera = new Three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    renderer = new Three.WebGLRenderer({ antialias: true });

    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    const material = new Three.MeshBasicMaterial({ color: 0x00ff00 });

    scene.background = new Three.color(FFFF);

    const geometry = new Three.BoxGeometry(1, 1, 1);
    cube = new Three.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
}


function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

init();

window.addEventListener('resize', onWindowResize, false)


function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
}

animate();

我确实搜索过这个问题，但唯一和我有同样问题的人是拼写错误或输入错误的人。

这里是HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>THREE Test</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script type="module" src="./code.js"></script>
</body>
</html>

Answer 1

导入不正确。应该是：

https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js

three.module.js 是 ESM 构建文件，而 three.js 是 UMD。如果你想在你的应用程序中使用 ES6 导入语法，你必须使用 ESM 版本。

Three.js 场景不是构造函数

Three.js Scene is not a constructor

javascript

three.js