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

Three.js——learn02

news 2025/12/28 9:44:26

Three.js——learn02

Three.js——learn02
- 通过轨道控制器查看物体OrbitControls
- - 核心代码
  - index2.html
  - index.css
  - index2.js
- result
- 添加辅助器
- - 1.坐标轴辅助器AxesHelper
  - - 核心代码
    - 完整代码
  - 2.箭头辅助器ArrowHelper
  - - 核心代码
    - 完整代码
  - 3.相机视锥体辅助器CameraHelper
  - - 核心代码
    - 完整代码

Three.js——learn02

通过轨道控制器查看物体OrbitControls

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动
和动画不同的是，轨道控制器由用户操控，手动调整位置来观察物体

核心代码

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
/创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命requestAnimationFrame(an)control.update()//开始渲染renderer.render(scene, camera)
}
an()

index2.html

<!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="./assets/styles/index.css" /></head><body><script src="./core/index2.js" type="module"></script></body>
</html>

index.css

* {margin: 0;padding: 0;background-color: beige;
}

index2.js

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//创建场景
const scene = new THREE.Scene()/*** 创建相机并设置相机参数* 参数：* 1. fov视野角度* 2.长宽比* 3.近端距离参数（近截面）最近能看到哪里* 4.远端距离参数（远截面）最远能看到哪里*/
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命requestAnimationFrame(an)control.update()//开始渲染renderer.render(scene, camera)
}
an()

result

在这里插入图片描述

添加辅助器

1.坐标轴辅助器AxesHelper

用于简单模拟3个坐标轴的对象，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴

核心代码

//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//创建场景
const scene = new THREE.Scene()/*** 创建相机并设置相机参数* 参数：* 1. fov视野角度* 2.长宽比* 3.近端距离参数（近截面）最近能看到哪里* 4.远端距离参数（远截面）最远能看到哪里*/
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命requestAnimationFrame(an)control.update()//开始渲染renderer.render(scene, camera)
}
an()

在这里插入图片描述

2.箭头辅助器ArrowHelper

用于模拟方向的3维箭头对象

核心代码

/*** 构建一个三维向量* x - 向量的x值，默认为0。* y - 向量的y值，默认为0。* z - 向量的z值，默认为0。*/
const dirx = new THREE.Vector3(1, 0, 0)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/*** 构建箭头* dir -- 基于箭头原点的方向. 必须为单位向量.* origin -- 箭头的原点.* length -- 箭头的长度. 默认为 1.* hex -- 定义的16进制颜色值. 默认为 0xffff00.* headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).* headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.*/
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//创建场景
const scene = new THREE.Scene()/*** 创建相机并设置相机参数* 参数：* 1. fov视野角度* 2.长宽比* 3.近端距离参数（近截面）最近能看到哪里* 4.远端距离参数（远截面）最远能看到哪里*/
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
/*** 构建一个三维向量* x - 向量的x值，默认为0。* y - 向量的y值，默认为0。* z - 向量的z值，默认为0。*/
const dirx = new THREE.Vector3(1, 0, 0)
const diry = new THREE.Vector3(0, 1, 0)
const dirz = new THREE.Vector3(0, 0, 1)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
diry.normalize()
dirz.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/*** 构建箭头* dir -- 基于箭头原点的方向. 必须为单位向量.* origin -- 箭头的原点.* length -- 箭头的长度. 默认为 1.* hex -- 定义的16进制颜色值. 默认为 0xffff00.* headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).* headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.*/
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
const arrowHelperY = new THREE.ArrowHelper(diry, origin, length, hex)
const arrowHelperZ = new THREE.ArrowHelper(dirz, origin, length, hex)//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)
scene.add(arrowHelperY)
scene.add(arrowHelperZ)
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命requestAnimationFrame(an)control.update()//开始渲染renderer.render(scene, camera)
}
an()

在这里插入图片描述

3.相机视锥体辅助器CameraHelper

用于模拟相机视锥体的辅助对象，它使用 LineSegments 来模拟相机视锥体

核心代码

//创建摄像机视锥辅助器
const helper = new THREE.CameraHelper(camera)
scene.add(helper)

完整代码

import * as THREE from 'three'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//创建场景
const scene = new THREE.Scene()/*** 创建相机并设置相机参数* 参数：* 1. fov视野角度* 2.长宽比* 3.近端距离参数（近截面）最近能看到哪里* 4.远端距离参数（远截面）最远能看到哪里*/
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质（颜色:0x00ff00）
const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
//创建物体对象（几何体+材质）
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//创建轨道控制器
const control = new OrbitControls(camera, renderer.domElement)
//更新控制器
control.update()
//创建辅助器
const axesHelper = new THREE.AxesHelper(5)
//场景中添加辅助器，用于简单模拟3个坐标轴的对象
scene.add(axesHelper)
/*** 构建一个三维向量* x - 向量的x值，默认为0。* y - 向量的y值，默认为0。* z - 向量的z值，默认为0。*/
const dirx = new THREE.Vector3(1, 0, 0)
const diry = new THREE.Vector3(0, 1, 0)
const dirz = new THREE.Vector3(0, 0, 1)
//将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1。
dirx.normalize()
diry.normalize()
dirz.normalize()
const origin = new THREE.Vector3(0, 0, 0)
const length = 3
const hex = 0xffffff
/*** 构建箭头* dir -- 基于箭头原点的方向. 必须为单位向量.* origin -- 箭头的原点.* length -- 箭头的长度. 默认为 1.* hex -- 定义的16进制颜色值. 默认为 0xffff00.* headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).* headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.*/
const arrowHelperX = new THREE.ArrowHelper(dirx, origin, length, hex)
const arrowHelperY = new THREE.ArrowHelper(diry, origin, length, hex)
const arrowHelperZ = new THREE.ArrowHelper(dirz, origin, length, hex)//我们可以给三个轴线添加箭头
//添加到场景中
scene.add(arrowHelperX)
scene.add(arrowHelperY)
scene.add(arrowHelperZ)
const helper = new THREE.CameraHelper(camera)
scene.add(helper)
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命requestAnimationFrame(an)control.update()//开始渲染renderer.render(scene, camera)
}
an()

在这里插入图片描述

Three.js——learn02

Three.js——learn02Three.js——learn02通过轨道控制器查看物体OrbitControls核心代码index2.htmlindex.cssindex2.jsresult添加辅助器1.坐标轴辅助器AxesHelper核心代码完整代码2.箭头辅助器ArrowHelper核心代码完整代码3.相机视锥体辅助器CameraHelper核心代码完整代码Three…...

编程日记 2023/4/20 18:44:19

零基础小白如何入门网络安全？

我经常会看到这一类的问题： 学习XXX知识没效果； 学习XXX技能没方向； 学习XXX没办法入门； 给大家一个忠告，如果你完全没有基础的话，前期最好不要盲目去找资料学习，因为大部分人把资料收集好之…...

编程日记 2023/4/20 18:45:42

【前缀和】

前缀和前缀和子矩阵的和结语前缀和输入一个长度为 n的整数序列。接下来再输入 m 个询问，每个询问输入一对 l,r 对于每个询问，输出原序列中从第 l 个数到第 r个数的和。输入格式第一行包含两个整数 n和 m 第二行包含 n个整数，表示整数…...

编程日记 2023/4/20 18:47:12

ChatGPT可以做WebRTC音视频质量性能优化，惊艳到我了

摘要随着GPT-4的发布，AI的风越吹越旺。GPT-4可以回答问题，可以写作，甚至可以基于一张草图生成html代码搭建一个网站。即构社区的一位开发者倪同学就基于目前在研究的WebRTC QOS技术点对GPT-3.5跟GPT-4进行一场实验，ChatGPT会取代…...

编程日记 2023/3/24 22:19:11

MySQL数据库实现主从同步

安装MySQL数据库8.0.32 前言今天来学习数据库主从同步的原理及过程，数据库主要是用来存储WEB数据，在企业当中是极为重要的，下面一起来看下。 1.1 数据库做主从的目的 MySQL主从复制在中小企业，大型企业中广泛使用&#xff0c…...

编程日记 2023/4/20 18:48:27

go语言gin框架学习

让框架去做http解包封包等，让我们的精力用在应用层开发 MVC模式 M: model，操作数据库gorm view 视图处理模板页面 contoller 控制器路由逻辑函数解决gin相关代码飘红的问题记得启用gomodule go env -w GO111MODULEon然后到相应目录下执行 go mod i…...

编程日记 2023/3/24 22:09:08

Java奠基】Java经典案例讲解

目录卖飞机票找质数开发验证码数组元素的复制评委打分数字加密数字解密抢红包模拟双色球二维数组卖飞机票需求：机票价格按照淡季旺季、头等舱和经济舱收费、输入机票原价、月份和头等舱或经济舱。按照如下规则计算机票价格： 旺季&…...

编程日记 2023/4/12 5:14:32

新闻文本分类任务：使用Transformer实现

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博…...

编程日记 2023/3/24 21:59:05

如何在 Vue 中使用防抖和节流

大厂面试题分享面试题库前后端面试题库 （面试必备） 推荐：★★★★★地址：前端面试题库 https://mp.weixin.qq.com/s?__bizMzU5NzA0NzQyNg&mid2247485824&idx3&sn70cd26a7c0c683de64802f6cb9835003&scene21#wech…...

编程日记 2023/4/20 18:50:00

美国Linux服务器系统增强安全的配置

美国Linux服务器系统可能出现的安全漏洞中，更多是由于不当的系统配置所造成的，用户们可以通过一些适当的安全配置来防止问题的发生。美国Linux服务器系统上运行的服务越多，不当配置的概率也就越高，那么系统出现安全问题的可能性也…...

编程日记 2023/3/24 21:49:01

【史上最全面esp32教程】oled显示篇

文章目录前言介绍及库下载基础使用引脚的连接使用函数总结前言本节课主要讲的是OLED的基础使用。使用的oled为0.96寸，128*64。大家的其他型号也是可以用的。提示：以下是本篇文章正文内容，下面案例可供参考介绍及库下载 oled的简介&…...

编程日记 2023/4/12 5:16:01

第十四届蓝桥杯三月真题刷题训练——第 21 天

目录第 1 题：灭鼠先锋问题描述运行限制代码： 思路： 第 2 题：小蓝与钥匙问题描述答案提交运行限制代码： 思路 : 第 3 题：李白打酒加强版第 4 题：机房第 1 题&#xff1…...

编程日记 2023/3/24 21:38:56

css绘制一个Pinia小菠萝

效果如下： pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体头部先绘制头部的盒子，将三片叶子至于头部盒子中先绘制中间的叶子，利用border-radius实现叶子的效果，可以借助工具来快速实现圆角的预想…...

编程日记 2023/3/24 21:33:54

OpenCV入门（二十）快速学会OpenCV 19 对象测量

OpenCV入门（二十）快速学会OpenCV 19 对象测量1.对象测量2.多边形拟合3.计算对象中心作者：Xiou 1.对象测量 opencv 中对象测量包括： 如面积，周长，质心，边界框等。弧长与面积测量； …...

编程日记 2023/3/24 21:28:53

TCP和UDP协议的区别？

是否面向连接： TCP 是面向连接的传输，UDP 是面向无连接的传输。是否是可靠传输：TCP是可靠的传输服务，在传递数据之前，会有三次握手来建立连接；在数据传递时，有确认、窗口、重传、拥塞控制机制…...

编程日记 2023/3/24 21:23:51

【C语言蓝桥杯每日一题】——排序

【C语言蓝桥杯每日一题】—— 排序😎前言🙌排序🙌总结撒花💞😎博客昵称：博客小梦 😊最喜欢的座右铭：全神贯注的上吧！！！ 😊作者简介&am…...

编程日记 2023/3/24 21:18:48

学校官网的制作

学校官网代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}.top{background-color: #3D3BB8;width: 100%;position: fixed;padding: 20px 0 12px 0;}.box{width…...

编程日记 2023/3/24 21:13:47

【云原生】k8s集群命令行工具kubectl之故障排除和调试命令

kubectl之故障排除和调试命令一、describe二、logs三、attach四、exec五、port-forward六、proxy七、cp八、debug8.1、案例1：共享进程空间8.2、案例2：更改启动命令、容器镜像8.3、案例3：调试节点8.4、其他一、describe 显示某个资源或某组资…...

编程日记 2023/4/20 18:51:10

AJAX,Axios,JSON简单了解

一. AJAX简介概念: AJAX(Asynchronous JavaScript And XML): 异步的JavaScript 和XMLAJAX作用:1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求，并获取服务器响应的数据使用了AJAX和服务器进行通信，就可以使用 HTMLAJAX来替换JSP页面了2.异步交互…...

编程日记 2023/3/24 21:03:43

私域流量该如何打造？这套模式直接借鉴

梦龙商业案例分析，带你了解商业背后的秘密古往今来，消费方与购买方的地位似乎就没有变过，消费者始终是处在被动接受的地位。但到了现在，其实消费地位早已经不知不觉产生了改变。就比如以前都是厂家有什么消费者买什么&#…...

编程日记 2023/4/12 5:17:21

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/23 17:18:10

Linux 文件类型，目录与路径，文件与目录管理

文件类型后面的字符表示文件类型标志普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。目录文件：d（directory） 用来存放其他文件或子目录。设备…...

编程新知 2025/12/26 16:24:20

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

【力扣数据库知识手册笔记】索引

索引索引的优缺点优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...

编程新知 2025/12/17 22:48:09

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2025/12/26 15:35:33

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2025/12/24 20:13:01

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/11/27 17:18:52

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。一、为何需要创建独立账号？ 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/12/23 13:27:38

Three.js——learn02

Three.js——learn02

通过轨道控制器查看物体OrbitControls

核心代码

index2.html

index.css

index2.js

result

添加辅助器

1.坐标轴辅助器AxesHelper

核心代码

完整代码

2.箭头辅助器ArrowHelper

核心代码

完整代码

3.相机视锥体辅助器CameraHelper

核心代码

完整代码

相关文章：