我试着用三个人来做一个简单的场景.jstry 使用它,我目前有一个未知的问题.

在浏览器控制台中,它一直在说三个.Scene()不是构造函数,无论我是导入下载的三个,还是使用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>

推荐答案

输入不正确.应该是:

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

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

Javascript相关问答推荐

使用Astro和React的动态API

使用ReactJS对Ant Design表中的空值进行排序

Angular 拦截器错误处理删除方法问题

为什么有些库公开了执行相同任务的方法,但每个方法都处于同步/同步上下文中?

不渲染具有HTML参数的React元素

我不知道为什么我的JavaScript没有验证我的表单

如何判断属于多个元素的属性是否具有多个值之一

警告!合同执行期间遇到错误[执行已恢复](Base Layer 2)

if/else JavaScript中的条件行为

在页面上滚动 timeshift 动垂直滚动条

D3 Scale在v6中工作,但在v7中不工作

Rehype将hashtag呈现为URL

如何修复(或忽略)HTML模板中的TypeScript错误?'

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

如何调用名称在字符串中的实例方法?

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

用于在路径之间移动图像的查询

使用插件构建包含chart.js提供程序的Angular 库?

传递方法VS泛型对象VS事件特定对象

在GraphQL解析器中修改上下文值