Threejs——Helper

最新推荐文章于 2024-08-09 17:35:20 发布
最新推荐文章于 2024-08-09 17:35:20 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： # Threejs 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yr1102358773/article/details/128219447
版权

Threejs——Helper

引言

在使用threejs的过程中，发现threejs内置了很多helper类，让我们可以通过几行代码来实现一些很常用的功能，简单方便使用。

下面就简单介绍一下threejs中内置的helper类。

箭头（ArrowHelper）

简介

箭头Helper，用于模拟方向的一个3D箭头对象。

官方文档：ArrowHelper – three.js docs (threejs.org)

参数

参数介绍
dir基于箭头原点的方向. 必须为单位向量.
origin箭头的原点
length箭头的长度. 默认为 1.
hex定义的16进制颜色值. 默认为 0xffff00.
headLength箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).
headWidth箭头头部(锥体)的宽度. 默认为箭头头部长度的0.2倍(0.2 * headLength).

效果图

在这里插入图片描述

坐标轴（AxesHelper）

简介

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

官方文档：AxesHelper – three.js docs (threejs.org)

参数

参数介绍
size(可选的) 表示代表轴的线段长度. 默认为 1.

效果图

在这里插入图片描述

包围盒（BoxHelper）

简介

用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。注意:

  • 要想能正常运行,目标对象必须包含 BufferGeometry , 所以当目标对象是精灵 Sprites 时将不能正常运行.
  • 此包围盒包含对象的所有子对象。

官方文档：BoxHelper – three.js docs (threejs.org)

参数

参数介绍
object(可选的) 被展示世界轴心对齐的包围盒的对象.
color(可选的) 线框盒子的16进制颜色值. 默认为 0xffff00.

效果图

在这里插入图片描述

包围盒3（Box3Helper）

简介

模拟3维包围盒 Box3 的辅助对象.

官方文档：Box3Helper – three.js docs (threejs.org)

参数

参数介绍
box被模拟的3维包围盒.
color(可选的) 线框盒子的颜色. 默认为 0xffff00.

效果图

效果同BoxHelper

摄像机（CameraHelper）

简介

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

官方文档：CameraHelper – three.js docs (threejs.org)

参数

参数介绍
camera被模拟的相机.

效果图

在这里插入图片描述

平行光（DirectionalLightHelper）

简介

用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.

官方文档：DirectionalLightHelper – three.js docs (threejs.org)

参数

参数介绍
light被模拟的光源.
size(可选的) 平面的尺寸. 默认为 1.
color(可选的) 如果没有设置颜色将使用光源的颜色.

效果图

在这里插入图片描述

网格（GridHelper）

简介

坐标格辅助对象. 坐标格实际上是2维线数组.

官方文档：GridHelper – three.js docs (threejs.org)

参数

参数介绍
size坐标格尺寸. 默认为 10.
divisions坐标格细分次数. 默认为 10.
colorCenterLine中线颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x444444
colorGrid中线颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x444444

效果图

在这里插入图片描述

极坐标格（PolarGridHelper）

简介

极坐标格辅助对象. 坐标格实际上是2维线数组.

官方文档：PolarGridHelper – three.js docs (threejs.org)

参数

参数介绍
radius极坐标格半径. 可以为任何正数. 默认为 10.
sectors网格将划分为的扇区数。这可以是任何正整数。默认值为16。
rings环的数量。这可以是任何正整数。默认值为8。
divisions圆圈细分段数. 可以为任何大于或等于3的正整数. 默认为 64.
color1极坐标格使用的第一个颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x444444
color2极坐标格使用的第二个颜色. 值可以为 Color 类型, 16进制 和 CSS 颜色名. 默认为 0x888888

效果图

在这里插入图片描述

半球形光源（HemisphereLightHelper）

简介

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 半球形光源 HemisphereLight.

官方文档：HemisphereLightHelper – three.js docs (threejs.org)

参数

参数介绍
light被模拟的光源.
sphereSize用于模拟光源的网格尺寸.
color(可选的) 如果没有赋值辅助对象将使用光源的颜色.

效果图

在这里插入图片描述

平面（PlaneHelper）

简介

用于模拟平面 Plane 的辅助对象.

官方文档：PlaneHelper – three.js docs (threejs.org)

参数

参数介绍
plane被模拟的平面.
size(可选的) 辅助对象的单边长度. 默认为 1.
hex(可选的) 辅助对象的颜色. 默认为 0xffff00.

效果图

在这里插入图片描述

点光源（PointLightHelper）

简介

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟 点光源 PointLight.

官方文档：PointLightHelper – three.js docs (threejs.org)

参数

参数介绍
light要模拟的光源.
sphereSize(可选的) 球形辅助对象的尺寸. 默认为 1.
color(可选的) 如果没有赋值辅助对象将使用光源的颜色.

效果图

在这里插入图片描述

骨骼（SkeletonHelper）

简介

用来模拟骨骼 Skeleton 的辅助对象. 该辅助对象使用 LineBasicMaterial 材质.

官方文档：SkeletonHelper – three.js docs (threejs.org)

参数

参数介绍
object通常是SkinnedMesh的实例。但是，如果Object3D的任何实例表示骨骼的层次结构（通过Object3D.childs），则可以使用该实例。

效果图

在这里插入图片描述

聚光灯（SpotLightHelper）

简介

用于模拟聚光灯 SpotLight 的锥形辅助对象.

官方文档：https://threejs.org/docs/api/zh/helpers/SpotLightHelper.html

参数

参数介绍
light被模拟的聚光灯 SpotLight .
color(可选的) 如果没有赋值辅助对象将使用光源的颜色.

效果图

在这里插入图片描述

尾语：

本人是一个初学threejs的，写的不对的地方欢迎各位大佬批评指正。

淡定九号
关注
专栏目录
Three 之 three.js （webgl）基础 3D 辅助对象 Helper 开发的工具简单介绍
仙魁XAN
05-06 2511
Three 之 three.js （webgl）基础 3D 辅助对象 Helper 开发的工具简单介绍 目录 Three 之 three.js （webgl）基础 3D 辅助对象 Helper 开发的工具简单介绍 一、简单介绍 二、辅助对象 Helper 1、ArrowHelper 箭头辅助对象 2、AxesHelper 轴坐标系辅助对象 3、BoxHelper 包围盒辅助对象 4、Box3Helper 模拟3维包围盒辅助对象 5、 CameraHelper 相机视锥体辅助对象 6.
threejs——开发一款塔防游戏
weixin_41770018的博客
04-10 1065
theme: fancy 前言 完成效果 gif 图较大，耐心等待，源码见文末 为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~ 目录结构 思维导图 具体功能和思路如下 有了这个思维导图，就可以按部就班，一步一步的实现游戏功能 技术栈 types...
ThreeJS中CameraHelper的使用
qq_21476953的博客
01-09 3519
代码参考 ThreeJS中CameraHelper的使用 想达到这种效果,都必须使用2个相机。 一个是屏幕相机,最终投影成像在屏幕 一个是带相机助手的相机 就如上图2所示,屏幕相机的投影是整个屏幕(左右两个小窗口共同组成),带相机助手的投影是左面的画面。 伪代码: // 屏幕相机 let camera = new THREE.PerspectiveCamera(45, 1, 0.01, 3...
Threejs实现鼠标控制相机+键盘控制模型+点击指定点控制模型移动
最新发布
weixin_62328265的博客
08-09 1217
Threejs实现鼠标控制相机+键盘控制模型+点击指定点控制模型移动, 包含预览图,技术栈,源码与详细原理解释
threejs之 GridHelper
qq_37200686的博客
05-16 841
GridHelper 的二维
Three.js中视角指示器viewHelper使用问题
maginexxx的博客
04-20 1446
在使用Three.js中的viewHelper时，会发现明明已经引入了相关方法，也渲染了，但是场景中却没有出现视角指示器。
three.js 箭头ArrowHelper的实践应用
yinge0508的博客
02-08 1689
【代码】three.js 箭头ArrowHelper的实践应用。
带你入门three.js——从0到1实现一个3d可视化地图
suandfei的博客
07-04 4921
前言 终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么 对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。 3d框架的选择——three.js 1.为什么选择thre
threejs精灵模型_#ThreeJS学习笔记( 二)——导入外部模型
weixin_36204513的博客
12-24 1754
外部模型格式Threejs支持了许多格式的3D模型导入，包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。这里主要讲解一下obj模型的导入，及将obj文件转成文件更小的json格式导入。导入obj模型3Dmax格式转换成obj格式美术提供的一般为3Dmax项目文件夹，里面包含了.max文件以及贴图图片等资源，用3DMAX打开.max文件可以看到3D...
学习Three.js——动画(Animation)
a13602955218的博客
12-23 3162
Tween 用法： var tween = new TWEEN.Tween({x:10}).to({x:3},10000).easing(TWEEN.Easing.Elastic.InOut).OnUpdate(function(){ }) Tween(…).to(…,time)是从一个状态变化到另一个状态，time是变化需要的时间(毫秒) easing是变化的方式，OnUpdate是...
Three.js——learn02
qq_51553982的博客
03-19 1137
用于简单模拟3个坐标轴的对象，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴。用于模拟相机视锥体的辅助对象，它使用 LineSegments 来模拟相机视锥体。Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。和动画不同的是，轨道控制器由用户操控，手动调整位置来观察物体。用于模拟方向的3维箭头对象。
threeJS-Helper01-arrowHelper （箭头）
谷子的博客
10-17 4463
郑重声明：发布此博客纯属技术展示和交流！未得本人同意，禁止转载！禁止商业目的！ 需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！ three里面Helper助手模块。相当于是debug助手了！ 今天我们来看看怎么添加一个箭头的助手-arrowHelper ...
Threejs——辅助视图的旋转轴
weixin_45705239的博客
07-23 450
【代码】Threejs——辅助视图的旋转轴。
threeJS-Helper07-GridHelper(网格助手)
谷子的博客
12-02 1817
需要电子档书籍或者源码可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！ 本章节学习的内容可以从的官方文档中找到 涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面 今天...
three.js中使用CameraHelper来可视化调整阴影相机的范围
webMinStudent的博客
05-26 408
有时候我们很难，调整好这个对应的数值，不过现在可以通过。，过小阴影会导致不显示或者不完整，来可视化调整这个阴影相机了。
three.js ViewHelper 使用报错
大英雄不该去雪山打滚
11-06 920
Threejs：Class constructor Object3D cannot be invoked without 'new' 参考：参考处 尝试更改three.js到0.124.0 npm uninstall three --save npm install --save three@0.124.0
Three.js(2)---＞基础篇-Helpers(辅助对象/辅助线)
z1783883121的博客
09-22 2909
在Three.js中有许多的Helper(辅助对象)用来帮助我们的开发。 本篇例举几个常见的，方便理解。以及一些效果 文章目录前言一、AxesHelper二、BoxHelper三、Box3Helper四、CameraHelper五、DirectionalLightHelper六、GridHelper七、PolarGridHelper八、HemisphereLightHelper九、PlaneHelper十、PointLightHelper十一、SpotLightHelper总结 前言 Helper对象.
threejs 右下角视角指示器
qq_42464004的博客
07-23 2910
从官方editor中整理得到 import * as THREE from 'three' export class ViewHelper extends THREE.Object3D { editorCamera: THREE.Camera private readonly container: HTMLElement private readonly panel: HTMLElement private readonly point = new THREE.Vecto
threejs CameraHelper 查看照相机的观察范围
weixin_30832983的博客
06-20 780
简单例子 这个例子，是在一个视图中，看到照相机的辅助线，也就是，一个照相机的观察访问 这样，就需要两个照相机，一个是主照相机，一个是加有辅助线的照相机（有两种，正交和透视，这里辅助的使用的是正交的） 设置两个照相机位置：注意，辅助的子照相机要在主照相机里面，这样才能在主照相机的镜头下看到辅助照相机的观察范围 //场景、摄像机、渲染器、实体 var ...
vue threejs显示辅助线
04-29
要在Vue中使用Three.js，并显示辅助线，可以按照以下步骤进行操作： 1. 安装Three.js和vue-threejs库 ``` npm install three vue-threejs --save ``` 2. 在Vue组件中导入Three.js和vue-threejs库 ```javascript import Vue from 'vue' import * as THREE from 'three' import { ThreeBSP } from 'three-js-csg-es6' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { DragControls } from 'three/examples/jsm/controls/DragControls.js' import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js' import { VueThreejs } from 'vue-threejs' ``` 3. 在Vue组件中使用VueThreejs组件，并添加辅助线 ```html <template> <vue-threejs :renderer="renderer" :camera="camera" :scene="scene" :width="width" :height="height" :clearColor="0xffffff"> <template slot-scope="{ renderer, camera, scene, width, height }"> <OrbitControls :camera="camera" :renderer="renderer" :enableDamping="true" /> <axes-helper :size="100" /> <grid-helper :size="100" :divisions="10" /> <!-- Your 3D objects here --> </template> </vue-threejs> </template> ``` 4. 运行Vue应用，即可看到带有辅助线的Three.js场景 ```javascript new Vue({ el: '#app', components: { VueThreejs }, data() { return { width: window.innerWidth, height: window.innerHeight, renderer: null, camera: null, scene: null } }, mounted() { this.init() }, methods: { init() { this.renderer = new THREE.WebGLRenderer({ antialias: true }) this.renderer.setSize(this.width, this.height) document.body.appendChild(this.renderer.domElement) this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000) this.camera.position.z = 10 this.scene = new THREE.Scene() } } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淡定九号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值