Three.js场景不是一个构造函数。

Question

Three.js场景不是一个构造函数。

3

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

在资源管理器控制台中，无论我导入我的 Three 下载版本还是使用 cdnjs，它都不断地提示 Three.Scene() 不是构造函数。

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>

- Francisco Fernandez

你确定Three.js通过CDN URL支持ESM（import语句）吗？ - evolutionxbox

每个人都说它可以，而且我之前也从本地文档导入过，但还是出现了错误。 - Francisco Fernandez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mugen87 · Accepted Answer

导入不正确。应该是：

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

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