ThreeJs之选中模型中的物体及物体沿轨迹移动

Posted 2023-03-09

参考技术A 本案例用到的技能：
1.加载模型
2.相机移动
3.鼠标选中模型
4.在场景中加入新的物体
5.物体沿路径移动
5.第一视角巡视
7.canvas画布自适应-页面窗口改变时模型不变形

首先新建react项目，引入Three，新建一个加载模型的class方法类，用于处理模型相关的操作。
主要思想是将图形组件与前端页面分离，降低图形组件与前端业务逻辑的耦合度。在图形组件中将方法暴露出来，前端页面来调用即可。

图形组件的class方法

初始化及加载模型：

渲染场景

canvas画布自适应窗口变化的方法：

鼠标选中模型的方法

// 鼠标点击时相机移动，即改变相机位置和中心点位置，以显示点击物体的最佳视角

在场景中加入一个新的立方体，并在立方体上加入相机，后面物体沿轨迹移动时调用物体身上的相机，实现以物体的视角展示模型

在场景中加入路径，物体沿着此路径移动

// 立方体沿路径移动和停止的方法，调用时执行

// 调用立方体上面的相机，展示第一视角

前端页面调用

页面中展示模型的canvas、信息div，操作按钮

实例化模型加载方法

// 鼠标移动和点击时将鼠标的位置传过去，在图形组件中转裁剪坐标，以判断是否选中物体

// 点击巡视按钮时调用立方体上的相机，并使立方体沿轨迹移动

Unity3D游戏物体操作 ② ( 3D 原生物体 | 立方体 | 球体 | 平面 | 物体移动 | 沿坐标轴移动 | 沿坐标平面移动 | 在 Inspector 检查器窗口设置坐标属性 )

文章目录

• 一、3D 原生物体
• • 1、立方体
  • 2、球体
  • 3、胶囊体
  • 4、圆柱体
  • 5、平面
  • 6、常用的建模软件
• 二、物体的移动
• • 1、物体的移动、旋转、缩放工具
  • 2、沿坐标轴移动
  • 3、沿坐标平面移动
  • 4、在 Inspector 检查器窗口设置坐标属性

一、3D 原生物体

---

Unity 中自带的 3D 模型 , 可以通过选择 " 菜单栏 | GameObject | 3D Object " 选项查看 ; Unity 中的 1 单位长度 = 1 米 , 这个长度只是 约定单位 , 不是绝对要求的 , 可以根据实际情况进行修改 ;

可创建 如下 类型的 基本 3D 原生物体 ;

1、立方体

Cube : 立方体 , 立方体 默认 长宽高 都是 1 单位长度 ( 1 米 ) ;

2、球体

Sphere : 球体 , 直径 1 单位 ( 1 米 ) ;

3、胶囊体

Capsule : 胶囊体 , 直径为 1 单位 ( 1 米 ) , 高度为 2 单位 ( 2 米 ) ;

4、圆柱体

Cylinder : 圆柱体 , 圆柱体 直径 为 1 单位 ( 1 米 ) , 高度为 2 单位 ( 2 米 ) ;

5、平面

Plane : 平面 , 平面的 长宽 都是 10 单位长度 ( 10 米 ) ;

6、常用的建模软件

原生模型 在游戏开发时 一般不用 , 使用如下建模软件 制作模型 :

• 3Dmax
• Maya
• ZBrush
• Cinema4D
• Blender

二、物体的移动

---

1、物体的移动、旋转、缩放工具

游戏物体 GameObject 添加到 Scene 场景 之后 , 可以使用

• 移动工具 : 工具栏的 工具 ;

• 旋转工具 : 工具栏的 工具 ;

• 缩放工具 : 工具栏的 工具 ;

进行对应的 移动 | 旋转 | 缩放 操作 ; 上述工具都是在 菜单栏下的 工具栏中 ;

2、沿坐标轴移动

沿着 坐标轴 移动 : 选中 游戏物体 GameObject 后 , 在物体上显示 3 个坐标轴 , 鼠标按住坐标轴 , 可以拖动物体沿坐标轴移动 ;

3、沿坐标平面移动

沿着 坐标平面 移动 : 选中 游戏物体 GameObject 后 , 在坐标轴的根部 , 有 3 个平面 , 鼠标左键按住平面 , 可以拖着物体在对应的 坐标平面移动 ;

• 沿 XZ 轴平面移动 : 鼠标按住下图中的 绿色平面 , 可以沿 XZ 轴平面移动 ;
  
• 沿 XY 轴平面移动 : 鼠标按住下图中的 蓝色平面 , 可以沿 XY 轴平面移动 ;
  
• 沿 YZ 轴平面移动 : 鼠标按住下图中的 红色平面 , 可以沿 YZ 轴平面移动 ;
  

4、在 Inspector 检查器窗口设置坐标属性

选中 物体 后 , 可以在 Inspector 检查器窗口 的 Transform | Position 处 , 设置 物体 坐标位置 属性 ;

点击 Inspector 检查器窗口 的 Transform 组件 右侧的 下拉菜单 , 在弹出菜单中 选择 " Reset " 选项 , 可以 将 Transform 属性 重置为初始属性 ;