当前位置：首页 > news >正文

Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

news 2026/2/11 3:42:08

在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 src="./three.js-master/build/three.js"></script>

改为

<script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js"}}
</script>
<script type="module">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);//本文示例

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>My first three.js app</title><style>body { margin: 0; }</style></head><body><script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js"}}</script><script type="module">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></body>
</html>

效果：可以旋转或者拖动视角
在这里插入图片描述

Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

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

编程日记 2023/12/29 2:22:37

【日志系列】什么是分布式日志系统？

✔️什么是分布式日志系统？ 现在，很多应用都是集群部署的，一次请求会因为负载均衡而被路由到不同的服务器上面，这就导致一个应用的日志会分散在不同的服务器上面。当我们要向通过日志做数据分析，问题排查的时候&#…...

编程日记 2023/12/29 2:20:35

[卷积神经网络]FCOS--仅使用卷积的Anchor Free目标检测

项目源码： FCOShttps://github.com/tianzhi0549/FCOS/ 一、概述作为一种Anchor Free的目标检测网络，FCOS并不依赖锚框，这点类似于YOLOx和CenterNet，但CenterNet的思路是寻找目标的中心点，而FCOS则是寻找每个像素点&…...

编程日记 2023/12/29 2:19:34

Ubuntu fcitx Install

ubuntu经常出现键盘失灵的问题查询资料得知应该是Ibus框架的问题于是需要安装fcitx框架和搜狗拼音 sudo apt update sudo apt install fcitx 设置fcitx开机自启动（建议） sudo cp /usr/share/applications/fcitx.desktop /etc/xdg/autostart/ 然后…...

编程日记 2023/12/29 2:18:33

【Makefile/GNU Make】知识总结

文章目录 1. 总体认识2. 编写Makefile2.1. Makefile的组成2.2. Makefile文件名2.3. 包含其他Makefile 3. 编写规则4. 编写规则中的构建命令5. 如何使用变量6. 条件判断7. 转换文本的函数8. 如何运行make9. 使用模糊规则10. 使用make来更新存档文件11. 扩展GNU make12. 集成GNU …...

编程日记 2023/12/29 2:17:32

腾讯云轻量服务器和云服务器CVM该怎么选?区别一览

腾讯云轻量服务器和云服务器CVM该怎么选？不差钱选云服务器CVM，追求性价比选择轻量应用服务器，轻量真优惠呀，活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年，540元三…...

编程日记 2023/12/29 2:16:32

一、备份数据库 –all-databases 备份所有数据库 /opt/mysqlcopy/all_$(date “%Y-%m-%d %H:%M:%S”).sql 备份地址 docker exec -it 容器名称 sh -c "mysqldump -u root -ppassword --all-databases > /opt/mysqlcopy/all_$(date "%Y-%m-%d %H:%M:%S").sq…...

编程日记 2023/12/29 2:14:30

Nginx 不同源Https请求Http 报strict-origin-when-cross-origin

原因： nginx代理配置url指向只开放了/* 而我/*/*多了一层路径成功：...

编程日记 2023/12/29 2:12:28

openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入数据-管理并发写入操作示例

文章目录 openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入数据-管理并发写入操作示例175.1 相同表的INSERT和DELETE并发175.2 相同表的并发INSERT175.3 相同表的并发UPDATE175.4 数据导入和查询的并发 openGauss学习笔记-175 openGauss 数据库运维-备份与恢复-导入…...

编程日记 2023/12/29 2:10:26

pnpm、npm、yarn是什么？怎么选择？

pnpm、npm、yarn三者是前端常用的包管理器，那么他们有什么区别呢？ 1. npm (Node Package Manager) npm是Node.js的默认包管理器。自Node.js发布以来，npm就一直作为它的一个组成部分存在，因此，安装Node.js时也会自动安…...

编程日记 2023/12/29 2:09:26

MySQL8 一键部署

#!/bin/bash ### 定义变量 mysql_download_urlhttps://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.33-linux-glibc2.12-x86_64.tar.xz mysql_package_namemysql-8.0.33-linux-glibc2.12-x86_64.tar.xz mysql_dec_namemysql-8.0.33-linux-glibc2.12-x86_64 mysql_download_…...

编程日记 2023/12/29 2:07:24

12 UVM Driver

目录 12.1 uvm_driver class hierarchy 12.2 How to write driver code? 12.3 UVM Driver example 12.4 How to get sequence items from the sequencer? 12.5 UVM driver methods 12.5.1 Using get_next_item/ try_next_item and item_done methods 12.5.2 Using get…...

编程日记 2023/12/29 2:03:21

“暂存”校验逻辑探讨

1、背景在业务中可能会遇到这种场景，前端页面元素多且复杂，一次性填完提交耗时很长，中间中断面临着丢失数据的风险。针对这个问题，“暂存”应运而生。那“暂存”的时候，是否需要对数据校验，如何进行校验…...

编程日记 2023/12/29 2:00:19

探究element-ui 2.15.8中＜el-input＞的keydown事件无效问题

一、问题描述今天看到一个问题，在用Vue2element-ui 2.15.8开发时，使用input组件绑定keydown事件没有任何效果。 <template><div id"app"><el-input v-model"content" placeholder"请输入" keydown&quo…...

编程日记 2023/12/29 1:58:17

Unity 代码控制Text自适应文本高度

在使用代码给Text赋值时，且文本有多段，并需要根据实际文本高度适配Text组件的高度时，可以使用以下方法： //Text文本 public TextMeshProUGUI text;void Start() {//代码赋值文本text.text "好!\n很好!\n非常好!";//获…...

编程日记 2023/12/29 1:55:15

TiDB 7.1 多租户在中泰证券中的应用

本文详细介绍了中泰证券在系统国产化改造项目中采用 TiDB 多租户技术的实施过程。文章分析了中泰证券数据库系统现状以及引入 TiDB 资源管控技术的必要性，探讨了 TiDB 多租户的关键特性，并阐述了在实际应用中的具体操作步骤。通过该技术的应用&#xff0…...

编程日记 2023/12/29 1:51:12

嵌入式-stm32-SR04超声波测距介绍及实战

一：超声波传感器介绍 1.1、SR04超声波测距硬件模块 1.2、SR04的四个IO口 vcc:提供电源5V gnd:接地 Trig:是**发送**声波信号的触发器 Echo:是**接收**回波信号的引脚当TRIG信号被触发时，传感器会发送一定频率的声波信号，该信号被反射后&am…...

编程日记 2023/12/29 1:50:11

智能优化算法应用：基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码文章目录智能优化算法应用：基于白鲸算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.白鲸算法4.实验参数设定5.算法结果6.参考文献7.MA…...

编程日记 2023/12/29 1:46:07

mac m1芯片 pytorch安装及gpu性能测试

pytorch 使用mac的m1芯片进行模型训练。 #小结：在数据量小和模型参数少，batch_size小时，cpu训练更快（原因：每次训练时数据需要放入GPU中，由于batch_size小。数据放入gpu比模型计算时间还长） 在…...

编程日记 2023/12/29 1:45:06

go 使用 - sync.WaitGroup

使用 - sync.WaitGroup 简介使用注意点简介 waitgroup 是等待一组并发操作完成得方法。Goroutines对Go来说是独一无二的（尽管其他一些语言有类似的并发原语）。它们不是操作系统线程，它们不完全是绿色的线程(由语言运行时管理的线程)&#x…...

编程日记 2023/12/29 1:44:05

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2026/2/10 23:39:55

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2026/2/8 5:11:39

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏：【自动化测试】【测试经验】【人工智能】【Python】 Python 操作 Excel 系列读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/2/10 13:23:50