在 Three.js学习二——Three.js极简入门 中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例，以此为前提，本篇将引进一个控制器的概念并使用”轨道控制器”（OrbitControls）来达到从不同方向展示场景内容的效果。
Three.js的控制器

   three.js的核心专注于3D引擎最重要的组件。其它很多有用的组件 —— 如控制器（control）、加载器（loader）以及后期处理效果（post-processing effect） —— 是 examples/jsm 目录的一部分。它们被称为“示例”，虽然你可以直接将它们拿来使用，但它们也需要重新混合以及定制。这些组件和 three.js 的核心保持同步，而 npm 上类似的第三方包则由不同的作者进行维护，可能不是最新的。
  如何使用控制器

我的项目文件结构，代码在index里，three.js-master是从官网下载的整包文件

这里有一个引用组件模块需要注意的兼容性问题
   CommonJS 导入
虽然现代的 JavaScript 打包器已经默认支持ES module，然而也有一些较旧的构建工具并不支持。对于这些情况，你或许可以对这些打包器进行配置，让它们能够理解 ES module 。例如，Browserify 仅需 babelify 插件。
    Import maps
和从静态主机或CDN来进行安装的方式相比，从npm安装时，导入的路径有所不同。我们意识到，对于使用两种不同方式的用户群体来说，这是一个人体工程学问题。使用构建工具与打包器的开发者更喜欢仅使用单独的包说明符（如’three’）而非相对路径，而examples/目录中的文件使用相对于 three.module.js 的引用并不符合这一期望。对于不使用构建工具的人（用于快速原型、学习或个人参考）来说，或许也会很反感这些相对导入。这些相对导入需要确定目录结构，并且比全局 THREE.* 命名空间更不宽容。
我们希望在 import maps 广泛可用时，能够移除这些相对路径，将它们替换为单独的包说明符，‘three’。这更加符合构建工具对npm包的期望，且使得两种用户群体在导入文件时能够编写完全相同的代码。对于更偏向于避免使用构建工具的用户来说，一个简单的 JSON 映射即可将所有的导入都定向到一个 CDN 或是静态文件夹。通过实验，目前你可以通过一个 import map 的 polyfill，来尝试更简洁的导入，如 import map example 示例中所示。
  简而言之：
其一：在script标签中，默认不能使用module形式，不能使用import导入文件，我们需要在script标签上添加加 type=module 属性；
其二：需要用 import maps 。
操作：将

<script></script>
复制代码

改为

<script>
        {
                "imports": {
                        "three": "./three.js-master/build/three.module.js"
                }
        }
</script>
<script>
        import * as THREE from "three";
</script>
复制代码

导入轨道控制器OrbitControls

import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";
复制代码

使用轨道控制器OrbitControls ，注意传参要求，需要先创建了需要的内容再传才行，反之则则会报错：
   Uncaught ReferenceError: Cannot access ‘camera’ before initialization
Uncaught ReferenceError: Cannot access ‘renderer’ before initialization
  OrbitControls 官网文档链接：https://threejs.org/docs/index.html?q=Controls#examples/zh/controls/OrbitControls

const controls = new OrbitControls(camera,renderer.domElement);//本文示例
复制代码

完整代码

                                        My first three.js app                                                <script>                        {                                "imports": {                                        "three": "./three.js-master/build/three.module.js"                                }                        }                </script>                <script>                        import * as THREE from "three";                        import { OrbitControls } from "./three.js-master/examples/jsm/controls/OrbitControls.js";
                        const scene = new THREE.Scene();                        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );                        const renderer = new THREE.WebGLRenderer();                        renderer.setSize( window.innerWidth, window.innerHeight );                        document.body.appendChild( renderer.domElement );                        const controls = new OrbitControls(camera,renderer.domElement);//创建控制器                        const geometry = new THREE.BoxGeometry();                        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );                        const cube = new THREE.Mesh( geometry, material );                        scene.add( cube );                        camera.position.z = 5;                        function animate() {                                requestAnimationFrame( animate );                                cube.rotation.x += 0.01;                                cube.rotation.y += 0.01;                                renderer.render( scene, camera );                        };                        animate();                </script>        
复制代码

效果：可以旋转或者拖动视角

来源：SketchUpBBS
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

扫一扫

没看完~~~~~~ 先顶，好同志

前排支持下，谢谢分享

信息对我非常有用，谢谢！

支持楼主发帖！

不错，支持下楼主

帖子对我很有帮助，谢谢楼主！

学习了，谢谢分享、、、

有竞争才有进步嘛