# model-show-view

**Repository Path**: wbgitee/model-show-view

## Basic Information

- **Project Name**: model-show-view
- **Description**: 定制化模型，blender建模通过threejs渲染
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-15
- **Last Updated**: 2024-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 定制化模型

####  介绍

通过**blender**建模前端3D渲染引擎**threejs**展示，使用uniapp和uview-ui框架打造H5、APP、小程序三端使用。由用户选择颜色最终3D打印。

uniapp教程：[uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/)

UI框架教程：[ uView 2.0 - uni-app UI 框架 (uviewui.com)](https://www.uviewui.com/js/intro.html)

threejs教程：[Three.js中文网 (webgl3d.cn)](http://www.webgl3d.cn/pages/aac9ab/)

#### 项目分类

model-shop模型商城

model-show渲染3d模型

#### 功能介绍

- 商品管理
- 分类管理
- 消息管理
- 订单管理
- 支付管理
- 会员管理
- 模型渲染

#### 开发历程

2023-10-31：技术选型确认可行性方案，使用blender工具完成3D建模导出为GLTF格式，通过前端渲染引擎threejs加载并展示，通过uniapp实现跨平台跨多端uview-ui框架完成样式。

2023-11-01：创建uniapp项目，通过npm方式引入uview-ui、threejs

2023-11-02：学习threejs+vue方式使用

<img src="./image\20231101.png" alt="20231101" style="zoom: 25%;" />

2023-11-05：threejs添加UI交互界面

<img src="./image\20231102.png" alt="20231102" style="zoom: 25%;" />

2023-11-13：添加首页功能，使用瀑布流

2023-11-21：完成定制化详情页，一开始采用的绝对定位方式总会产生滑动滚轮条，因为高度总计算不对。后面采用flex布局自动撑开

2023-11-24：修改定制化页面颜色筛选器，改成滑动的方式选择颜色

2023-11-28：添加底部导航栏，采用uniapp的pages.json配置方式

2023-12-01：添加分类页面

2023-12-03：通过threejs射线拾取层级模型判断点击的是哪个部位并加载对应数据

2023-12-05：使用uview-ui网络请求封装，统一前缀加上域名或ip

2023-12-06：package.json加入不同环境区分并切换不同域名

2023-12-08：添加购物车页面

2023-12-11：使用uview-ui样式自定义底部导航栏

2023-12-12：引入vuex全局数据存储

父子组件通信

```
Prop向子组件传递数据，$emit子组件向父组件传递数值
使用.sync语法糖进行属性双向绑定，子组件执行this.$emit('update:name', newVal)通知父组件
通过$refs或者$children获取子组件属性和方法，通过$parent获取父组件属性和方法
$attrs和$listeners(隔代组件通信)，组件通过$attrs获取属性，通过$listeners获取事件并绑定在子组件上
provide和inject(用于多级嵌套组件)，父组件通过provide提供数据，子组件通过inject注入数据
slot作用域传值
```

全局组件通信

```
数据总线：声明一个全局实例变量EventBus，EventBus.$emit和EventBus.$on传递数据
VueX是一个专门为Vue.js应用程序开发的状态管理模式
// 原始获取值方法
this.$store.state.模块名.属性名
// computed通过vuex
...mapState(模块名, [属性名]) 或者 ...mapState(['模块名/属性名'])
// 封装了$u.mixin.js
this.模块名.属性名
```

页面通信

```
发布订阅（Pub/Sub）模式
localStorage（浏览器缓存）
页面跳转携带参数，this.$route.query获取
HTTP请求
```

2023-12-13：添加消息页面

2023-12-14：添加个人中心页面

2023-12-15：改造定制化属性工具，改成点击模型底部弹出工具栏方式。完成第一次项目初稿上传到gitee

<img src=".\image\20231113.png" alt="20231113" style="zoom: 25%;" />

2023-12-18：开始部署到小程序端查看效果，引入微信官方提供的threejs-miniprogram库。小程序不支持本地模型加载并且小程序有包大小限制所以也不能放本地，改用http方式调用nginx部署模型文件

2023-12-19：H5端模型展示不出来发现跨域问题，manifest.json配置devServer。原先采用的npm方式引入其它库下载的包在node_modules文件夹中，uniapp不会编译该目录。只能移除所有文件到common目录中

2023-12-20：模型一直显示不出来发现编译后的model-render组件js没有内容，而且各种属性undefined，运行到手机模拟器也是一样。原来是script标签上加了lang="renderjs"

2023-12-21：通过\#ifdef条件编译改写成兼容小程序版本，因为小程序、APP都使用不了document、windows等属性。主要修改THREE库引入、模型加载器GLTFLoader、控制器OrbitControls修改

**1、容器改变**

```javascript
<canvas type="webgl" id="webgl" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
```

**2、获取节点方式改变**

```
wx.createSelectorQuery()
	.select('#webgl')
	.node()
	.exec((res) => {
		this.canvas = res[0].node
		// 创建一个与 canvas 绑定的 three.js
		THREE = createScopedThreejs(this.canvas)
		registerGLTFLoader(THREE)
		this.init();
	})
```

**3、加载器和控制器创建方式改变**

```
const { OrbitControls } = registerOrbit(THREE)
```

**4、渲染方式改变**

```
animate() {
	this.controls && this.controls.update();
	this.renderer.render(this.scene, this.camera);		
	this.container.requestAnimationFrame(this.animate);
},
```

**5、控制事件监听改变**

```
touchStart(e) {
	this.container.dispatchTouchEvent({
		...e,
		type: 'touchstart'
	})
},
touchMove(e) {
	this.container.dispatchTouchEvent({
		...e,
		type: 'touchMove'
	})
},
touchEnd(e) {
	this.container.dispatchTouchEvent({
		...e,
		type: 'touchEnd'
	})
},
```

2023-12-22：小程序模型可以显示出来但是性能和进度条都需要优化，旋转模型都会有点卡顿的现象。调试兼容APP端，APP想着用lang="renderjs"来实现，app不能使用document所以需要把THREE相关的放到render中再通过this.$ownerInstance.callMethod的api把数据返回给vue页面实现数据通信，能够显示模型也有进度条加载但是旋转模型还是有卡顿问题，性能还需要优化。

2023-12-25：小程序模型渲染用的官方提供的threejs-miniprogram有点不太好用，换一个three改造的渲染库three.weapp.js修改，能够正常显示模型但是性能问题还是没有解决，模型加载中回调也不会触发。

2023-12-26：采用three-platformize库来修改，文档说是能兼容各种小程序。改造完模型能展示但一直提示THREE.Texture: Unable to serialize Texture，并且页面非常卡顿还是放弃这种。因为使用的库都有性能问题，但是在web页面能够正常使用，所以最终还是决定通过webview的方式加载H5页面这样就能使用原生的THREE库

2023-12-28：使用webview会占满整个屏幕所以需要把导航栏写到model-show里面，这样就涉及到H5页面返回怎么跳转到应用的问题。一开始想通过通信的方式postMessage传参来判断但小程序不支持实时，后发现可以引入对应小程序SDK直接switchTab跳转页面。引入的方式还有坑，需要放到body标签下面。最好是把文件下载到本地static目录，因为网页打开有跨域问题找了好久才发现是这个原因。manifest.json还需要指定模板路径不难在index.html引入了SDK也不会执行，路由模式配置成history不难this.$route.query拿不到参数。

<img src=".\image\20231227.png" alt="20231227" style="zoom: 25%;" />



2023-12-29：小程序、H5、APP端都能正常显示模型渲染，完成第二次提交上传项目到远程仓库

2024-01-03：实现自定义顶部导航栏，添加状态栏占位，如果是小程序还需要和胶囊按钮平齐。

2024-01-05：添加模型详情页面刚进入的页面加载效果和加载失败的显示。小程序中webview会自带一个导航栏，现在暂时隐藏小程序中自定义的导航栏使用官方的。