threejs 三维物体(Object3D)
阅读数:221 评论数:0
跳转到新版页面分类
html/css/js
正文
一、概述
THREE.Object3D
是 Three.js 的基础类,用于表示 3D 空间中的一个对象。几乎所有的 3D 对象(如 Mesh
、Group
、Camera
、Light
等)都继承自 THREE.Object3D
,它定义了这些对象的基本属性和行为,如位置、旋转、缩放、层次关系等。
二、核心属性
(1)空间变换相关
position
: 对象的位置,类型为THREE.Vector3
,默认值为(0, 0, 0)
。rotation
: 对象的旋转,类型为THREE.Euler
,表示欧拉角(以弧度为单位)。quaternion
: 对象的旋转(四元数表示),可用于替代欧拉角。scale
: 对象的缩放比例,类型为THREE.Vector3
,默认值为(1, 1, 1)
。matrix
: 对象的世界变换矩阵,描述其在 3D 空间中的位置、旋转和缩放。matrixWorld
: 世界空间中的变换矩阵(包括父对象的影响)。
(2)层次关系
parent
: 当前对象的父对象。children
: 包含的子对象数组,类型为THREE.Object3D[]
。
(3)其他属性
visible
: 是否可见,默认为true
。castShadow
: 是否投射阴影。receiveShadow
: 是否接收阴影。name
: 对象的名称,便于标识和查找。userData
: 自定义数据存储,类型为Object
。
三、核心方法
1、层次管理
add(child)
: 将一个子对象添加到当前对象。remove(child)
: 从当前对象移除一个子对象。getObjectByName(name)
: 根据名称查找子对象。traverse(callback)
: 遍历当前对象及其所有子对象,并对每个对象执行回调函数。
2、空间变换
translateX(distance)
/translateY(distance)
/translateZ(distance)
: 沿 X、Y、Z 轴移动指定距离。lookAt(vector)
: 使对象朝向指定位置。rotateX(angle)
/rotateY(angle)
/rotateZ(angle)
: 绕 X、Y、Z 轴旋转指定角度。localToWorld(vector)
: 将局部坐标转换为世界坐标。worldToLocal(vector)
: 将世界坐标转换为局部坐标。
相关推荐
一、概述
OrbitControls 是 three.js 中的一个控制器,用于实现对 3D 场景的相机控制,允许用户通过鼠标或触摸操作来旋转、缩放和平移视图。
即轨道控制器,可以使相机围绕目标旋转。
一、动画片段 animation clips
每个animationClip通常保存3D动画对象某个活动的数据。举个例子,假如mesh是一个角色,可能有一个AnimationClip实现步行循
一、概述
CSS2DRenderer 是 three.js 中的一个渲染器,用于将 HTML/CSS 元素(如标签、文本、图片等)渲染到 3D 场景中的指定位置。这种渲染器与 WebGLRendere
一、概述
WebGLRenderer 是 three.js 中的核心渲染器,用于将 3D 场景渲染到网页的 <canvas> 元素上。它使用 WebGL 技术,通过 GPU(图形处理单元)进行硬件加速
一、归一化设备坐标
在屏幕像素坐标系统中:
X 轴的正方向是从左到右,和归一化设备坐标系统一致。
Y 轴的正方向是从上到下,这与归一化设备坐标系统 相反。
在归一化设备坐标 (NDC) 系统中:
一、material.emissive
在 Three.js 中,material.emissive 是一个材质属性,用来控制物体的 自发光 效果。这个属性的值通常是一个 颜色,表示物体自发光的颜色,
场景允许你在什么地方、摆放什么东西来交给three.js来渲染,是旋转物体、灯光和相机的地方。
一、构造器
<pre class="language-javascript"
一、概述
THREE.Clock 是 Three.js 中的一个类,用于管理和获取时间的流逝,特别是用于控制动画或其他基于时间的更新。它通常用于在每帧渲染时获取经过的时间,帮助计算帧率或实现平滑的动画