如何在 three.js 中导入 OrbitControls答案

【问题标题】：How do i import OrbitControls in three.js如何在 three.js 中导入 OrbitControls
【发布时间】：2022-02-13 22:27:26
【问题描述】：

我尝试导入 OrbitControls，但它不起作用。
我导入了three.js，然后尝试引入OrbitControls，但它不起作用我用这个命令在 html 的正文中导入了 three.js script 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 not working with Loading file 只需确保将 type=“module” 添加到您的
谢谢你的工作
看我的答案...应该这样做

标签： javascript three.js

【解决方案1】：

您正在使用 jsm 版本的 OrbitControls，这意味着您需要一个用于 Javascript 文件的模块。变化：

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

到

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

这应该可以解决问题。

【讨论】：