threejs 三维物体(Object3D)

阅读数:221 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

THREE.Object3D 是 Three.js 的基础类,用于表示 3D 空间中的一个对象。几乎所有的 3D 对象(如 MeshGroupCameraLight 等)都继承自 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 场景的相机控制,允许用户通过鼠标或触摸操作来旋转、缩放和平移视图。 即轨道控制器,可以使相机围绕目标旋转。

环境光会均匀的照亮场景中的所有物体,它不能用来投射阴影,因为它没有方向。 一、构造函数 Amb

聚光灯是从一个方向上的一个点发出,沿着一个圆锥体,它离光越远,它的尺寸就越大。 一、构造器 SpotL

一、动画片段 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 中的一个类,用于管理和获取时间的流逝,特别是用于控制动画或其他基于时间的更新。它通常用于在每帧渲染时获取经过的时间,帮助计算帧率或实现平滑的动画