Three.js Scene 不是构造函数

发布于 2025-01-17 06:11:33 字数 1678 浏览 1 评论 0原文

我正在尝试用一些 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>

原文

I am trying to make a simple scene with some Three.js to experiment with it and i am currently having an unknown problem.

In the explorer console it keeps saying that Three.Scene() is not a constructor no matter if i import my download of Three or if i use the 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();

I actually searched for this question but the only ones who had the same problem as me were people who misspelled something or imported something wrong.

Here the 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>

分享到QQ

分享到微博