javascript - Three.js 错误 --> THREE.Scene 不是构造函数
问题描述
由于此错误,我无法执行我的代码:
TypeError: THREE.Scene is not a constructor
我使用来自官方 github 存储库的 three.js 文件,这是我的文件:
索引.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>First three.js</title>
</head>
<body>
<script type="module" src="../frontend/tetrahedrons_render.js"></script>
</body>
</html>
四面体渲染.js
import * as THREE from '../lib/three.js';
// Create the scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x2d3436);
// Set up the camera
const camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
// Set up the render
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// Create n random tetrahedrons
const n = Math.floor(Math.random() * 7) + 2;
const tetrahedrons = [];
const positions = [];
let x, y;
for (let i = 0; i < n; i++) {
do {
x = Math.floor(Math.random() * 10) - 5;
y = Math.floor(Math.random() * 10) - 5;
} while ([x, y] in positions);
positions.push([x, y]);
tetrahedrons.push(createTetrahedron(x * 2.5, y * 2.5));
}
// Color one random tetrahedron in black and another in white
const i = Math.floor(Math.random() * tetrahedrons.length);
let i2;
do {
i2 = Math.floor(Math.random() * tetrahedrons.length);
} while (i2 === i);
tetrahedrons[i].geometry.faces.forEach((face) => {
face.color = new THREE.Color('black');
});
tetrahedrons[i2].geometry.faces.forEach((face) => {
face.color = new THREE.Color('white');
});
camera.position.z = 15;
function animate() {
requestAnimationFrame(animate);
// Rotation
tetrahedrons.forEach((tetrahedron) => {
tetrahedron.rotation.x += 0.03;
tetrahedron.rotation.y -= 0.03;
});
renderer.render(scene, camera);
}
animate();
function createTetrahedron(x, y) {
const geometry = new THREE.Geometry();
geometry.colorsNeedUpdate = true;
geometry.vertices.push(
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(-1, -1, 1),
new THREE.Vector3(-1, 1, -1),
new THREE.Vector3(1, -1, -1),
);
// * To be pointing toward the outside of the cube
// * they must be specified in a counter clockwise
// * direction when that triangle is facing the camera
geometry.faces.push(
new THREE.Face3(0, 2, 1),
new THREE.Face3(0, 3, 2),
new THREE.Face3(0, 1, 3),
new THREE.Face3(1, 2, 3),
);
// Set faces colors
geometry.faces[0].color = new THREE.Color('red');
geometry.faces[1].color = new THREE.Color('blue');
geometry.faces[2].color = new THREE.Color('green');
geometry.faces[3].color = new THREE.Color('yellow');
// Set materials
const material = new THREE.MeshBasicMaterial({
color: 0x95a5a6,
vertexColors: THREE.FaceColors,
});
material.needsUpdate = true;
const tetrahedron = new THREE.Mesh(geometry, material);
tetrahedron.geometry.colorsNeedUpdate = true;
// Add the tetrahedron to the scene
scene.add(tetrahedron);
tetrahedron.position.x = x;
tetrahedron.position.y = y;
return tetrahedron;
}
这是所有代码,但我认为问题必须在第一行导入。
我看到很多帖子都有类似的错误,但我找不到适合我的解决方案。
解决方案
Three.js 有三个输出文件:
- 三.js
- three.js 源代码的未损坏包
- 三分钟.js
- 捆绑的 three.js 源代码的损坏/缩小(较小)版本
- 三.module.js
- three.js 包的 JavaScript 模块版本
您需要引用最后一个以导入 three.js 导出。复制three.module.js
到您的lib
文件夹中,然后:
import * as THREE from '../lib/three.module.js';
推荐阅读
- javascript - 尽管使用扩展运算符制作状态副本,但 Redux 状态突变
- filter - 使用 filter() 时出现类型错误
- javascript - 如何在多个键上设置相同的值
- r - 如何在 R 中动态创建变量名和赋值?
- python-3.x - Docker 容器中的 Azure CLI
- java - NestedScrollView 在 CoordinatorLayout 内是透明的,但是:我不希望它是透明的
- javascript - javascript剪切特定单词之前的文本
- c# - 控制台应用程序中的最大并行任务,以及调用 API 时如何处理“将内容复制到流时出错”
- c# - 针对数据库验证文件/档案 - 派生类是否正确?
- clickonce - 为什么使用 VS 测试证书时使用 QBFC 的 ClickOnce 应用程序会崩溃?