如何在three.js中导入OrbitControls



我试图导入OrbitControls,但它不起作用
我导入了三个.js,然后尝试导入OrbitControls,但它不起作用我用这个命令在html的正文中导入了three.jsscript src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"注意:我确实有一个场景、一个相机和一个渲染器,但我不能在这里发布这篇文章。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Css/master.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
<script src="Main.js"></script>
</body>
</html>
***Main.js***
import { OrbitControls } from 'three/example/jsm/controls/OrbitControls';


const controls = new OrbitControls(camera, renderer.domElement);
function animate(){
requestAnimationFrame(animate);
torus.rotation.x +=0.01;
torus.rotation.y +=0.01;
torus.rotation.z +=0.01;
controls.update();
renderer.render(scene,camera);
}
animate()

您使用的是OrbitControls的jsm版本,这意味着您需要一个用于Javascript文件的模块。更改:

<script src="Main.js"></script>

<script type="module" src="Main.js"></script>

这就行了。

最新更新