# threejs_vue

**Repository Path**: codes-demos/threejs_vue

## Basic Information

- **Project Name**: threejs_vue
- **Description**: 通过ThreeJsUtil实现各种功能的方法，诸如模型爆破，MMD模型展示，事件监听，天空盒，相机飞行，边缘轮廓发光，第一人称相机控制以及精灵标签等。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-18
- **Last Updated**: 2024-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 style="text-align: center">ThreeJsUtil演示Demo</h1>

# 简介

## 项目简介
`ThreeJsUtil演示Demo` 是基于 vue2 开发的ThreeJsUtil工具类的演示demo，演示了通过ThreeJsUtil实现各种功能的方法，诸如模型爆破，MMD模型展示，事件监听，天空盒，相机飞行，边缘轮廓发光，第一人称相机控制以及精灵标签等。

## 项目来源
来源于大二时的实验室项目（智慧重电），从中抽离出的threejs工具类的demo演示。

## 在线体验
暂不提供

## 项目源码
|  平台 | 源码地址                                      |
|---  |-------------------------------------------|
|  码云   | https://gitee.com/codes-demos/threejs_vue |

## 反馈交流
为了方便管理，现已开启 Gitee 的 Issues 功能，欢迎在 [Gitee](https://gitee.com/codes-demos/threejs_vue/issues) 上提 Issues。

QQ：484132820、微信：tsuimengchao、邮箱：tsuimengchao@aliyun.com

# 界面展示
## 开始
1、HelloWorld
![img.png](docs/img.png)

2、Demo
![img_1.png](docs/img_1.png)
光标选中后双击执行相机飞行，切换中心体
![img_2.png](docs/img_2.png)

## 场景
1、天空（使用内置天空，720度旋转）
![img_3.png](docs/img_3.png)

2、场景背景图(静态背景)
![img_4.png](docs/img_4.png)

3、场景天空盒（6张照片无缝拼接）
![img_5.png](docs/img_5.png)

## 相机
1、相机飞行（图片展示不出效果）
![img_6.png](docs/img_6.png)

2、相机飞行到模型周围（飞行完毕后以模型作为中心点，启用控制器）
![img_6.png](docs/img_6.png)

3、漫游（鼠标悬浮在地方出现红圈，点击地面移动到点击处）
![img_7.png](docs/img_7.png)
![img_8.png](docs/img_8.png)

## 模型
1、获取模型层级(看控制台打印值)，其余获取参数案例一致，暂不展示
![img_9.png](docs/img_9.png)

2、模型动画（马儿在奔跑，模型内置动作，图片展示不出效果）
![img_10.png](docs/img_10.png)

3、模型爆破图（双击模型，模型按楼层展开，蓝色轮廓线代表鼠标停留在模型上）
![img_11.png](docs/img_11.png)
![img_12.png](docs/img_12.png)

4、线框模型（模型仅显示框架）
![img_13.png](docs/img_13.png)

5、mmd模型展示（有动作和声音）
![img_14.png](docs/img_14.png)
![img_15.png](docs/img_15.png)

## 标签
1、精灵文字（永远面向相机）
![img_16.png](docs/img_16.png)

2、精灵标签（永远面向相机）
![img_17.png](docs/img_17.png)

3、div精灵标签（使用html动态渲染进去的，可使用css调整样式，永远面向相机）
![img_18.png](docs/img_18.png)

4、2DCss标签（永远占相机固定尺寸，无视相机远近，永远面向相机）
![img_19.png](docs/img_19.png)
![img_20.png](docs/img_20.png)

4、3DCss标签（固定朝向）
![img_21.png](docs/img_21.png)
![img_22.png](docs/img_22.png)

## 事件
1、事件监听（看控制台打印）
![img_23.png](docs/img_23.png)

## 插件
1、Gui（threejs内置）
![img_24.png](docs/img_24.png)
![img_25.png](docs/img_25.png)

2、Stats（左上角帧率检测）
![img_26.png](docs/img_26.png)
![img_27.png](docs/img_27.png)
![img_28.png](docs/img_28.png)

## 后期处理
1、边缘轮廓发光（分为可见域与不可见域）
![img_29.png](docs/img_29.png)
![img_30.png](docs/img_30.png)

2、辉光（模型发光）
![img_31.png](docs/img_31.png)
![img_32.png](docs/img_32.png)

## 控制器
1、轨道控制器（threejs自带）
![img_33.png](docs/img_33.png)

2、第一人称相机控制器（前后左右移动，跳跃，碰撞检测-是否在地面以及是否撞墙等，重力下落）
![img_34.png](docs/img_34.png)

3、第三人称相机控制器
![img_35.png](docs/img_35.png)

4、鼠标锁定控制器（第一人称加鼠标锁定在屏幕中心，类似于大部分3D游戏控制器）
![img_36.png](docs/img_36.png)

## 简单案例
1、智慧实验室（射线拾取配合事件监听可以获得触发事件关联的物体）
![img_37.png](docs/img_37.png)
![img_38.png](docs/img_38.png)

2、15栋3楼
![img_39.png](docs/img_39.png)