devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Three模型换装项目，引入FBX模型并且修改渲染器大小和模型居中_three.js 换衣

作者：Cpp五条 | 2024-02-16 18:05:39

赞

踩

three.js 换衣

      项目内嵌到uniapp开发的h5页面中，

        第一步先引入three.js

npm install three

        然后代码里面引入，我的模型是FBX文件，引入的fbxloader加载器，如果出现找不到指定的版本号错误则检查引入模型文件的时候地址，需要放在公共文件夹

  1. import * as THREE from 'three'
  2. import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
  3. import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

        html页面是这样的，代码里面的<tabbar>标签是我项目需要的导航栏，如果借用的话请删除，不然会引起报错。

  1. <template>
  2. 	<view>
  3. 		<button @click="changeClothes()">缩小</button>
  4. 		<button @click="hoMing()">归位</button>
  5. 		<button @click="changeOld('裤子','../../static/fbx/2.fbx')">切换裤子</button>
  6. 		<button @click="changeOld('卫衣','../../static/fbx/weiyi.fbx')">切换卫衣</button>
  7. 		<view id="canvas">
  8. 		</view>
  9. 		<!-- <view id="loading">Loading...</view> -->
  10. 		<!-- <image src="../../static/images/No.2.png"></image> -->
  11. 		<tabbar></tabbar>
  12. 	</view>
  13. </template>

       下面是JS部分

  1. <script>
  2. 	import * as THREE from 'three'
  3. 	import {
  4. 		FBXLoader
  5. 	} from 'three/examples/jsm/loaders/FBXLoader';
  6. 	import {
  7. 		OrbitControls
  8. 	} from 'three/examples/jsm/controls/OrbitControls'
  9.  
  10. 	export default {
  11. 		name: 'HelloWorld',
  12. 		data() {
  13. 			return {
  14. 				scene: null,
  15. 				camera: null,
  16. 				renderer: null,
  17. 				model: null,
  18. 				materials: [],
  19. 				controls: null,
  20. 				mixer: null,
  21. 				meshes: [],
  22. 				newMaterial: null, //新模型的材质
  23. 				pants: null,
  24. 				manager: null,
  25. 				aspectOld: null, //旧的等宽比
  26. 				heightOld: null, //初始设备的高度
  27. 				widthOld: null, //初始设备的宽度
  28. 				Newaspect: null, //新的宽比
  29. 			}
  30. 		},
  31. 		methods: {
  32. 			/**
  33. 			 * 初始化场景、相机、灯光、模型等
  34. 			 */
  35. 			init() {
  36.  
  37. 				this.aler()
  38. 				//记录设备初始宽高
  39. 				this.scene = new THREE.Scene()
  40. 				console.log(this.camera)
  41. 				this.aspectOld = this.camera.aspect //记录设备初始等宽比！！！
  42.  
  43. 				console.log(window.innerWidth)
  44.  
  45. 				// this.camera.aspect = window.innerWidth / window.innerHeight;
  46. 				//   this.camera.updateProjectionMatrix();
  47. 				document.getElementById('canvas').appendChild(this.renderer.domElement)
  48. 				this.controls = new OrbitControls(this.camera, this.renderer.domElement)
  49. 				// this.renderer.domElement.style.height='390px'
  50. 				// this.renderer.domElement.style.width='50%'
  51.  
  52. 				this.renderer.setClearColor(0xffffff); // 设置背景颜色为白色
  53. 				// this.loading()
  54. 				this.load('../../static/fbx/boy.fbx')
  55. 				this.render()
  56. 			},
  57. 			/**
  58. 			 * 加载 FBX 模型
  59. 			 */
  60.  
  61. 			load(modelUrl) {
  62. 				let that = this
  63. 				// const loader = new FBXLoader(that.manager);
  64. 				const loader = new FBXLoader();
  65. 				loader.load(modelUrl, (fbx) => {
  66. 					console.log(fbx)
  67. 					fbx.scale.set(0.3, 0.3, 0.3)
  68.  
  69. 					this.camera.lookAt(0, 0, 0)
  70.  
  71. 					//模型居中
  72. 					const box = new THREE.Box3().setFromObject(fbx);
  73. 					const center = new THREE.Vector3();
  74. 					box.getCenter(center);
  75. 					fbx.position.sub(center);
  76. 					fbx.traverse((child) => {
  77. 						if (child.name == "Camera") {
  78. 							this.camera.position.set(child.position.x, child.position.y, child.position.z)
  79. 						}
  80. 						if (child.type == "PointLight") {
  81. 							child.intensity = 1
  82. 						}
  83. 						if (child.type == 'DirectionalLight') {
  84. 							child.intensity = 1
  85. 						}
  86. 					})
  87. 					//有动画的模型默认加载第一个动画
  88. 					if (fbx.animations.length != 0) {
  89. 						that.mixer = new THREE.AnimationMixer(fbx)
  90. 						const action = that.mixer.clipAction(fbx.animations[0])
  91. 						action.play()
  92. 						that.methse(fbx)
  93. 					}
  94. 					that.model = fbx
  95. 					that.scene.add(fbx);
  96. 				})
  97. 			},
  98. 			// 对象数据保存到数组中
  99. 			methse(fbx) {
  100. 				fbx.traverse((child) => {
  101. 					if (child instanceof THREE.Mesh) {
  102. 						this.meshes.push(child)
  103. 					}
  104. 				})
  105. 			},
  106. 			changeOld(num, path) {
  107. 				let that = this
  108. 				this.switching_model(num, path)
  109. 			},
  110. 			//页面回到默认
  111. 			hoMing() {
  112. 				this.camera.aspect = this.aspectOld;
  113. 				this.renderer.setSize(window.innerWidth, window.innerHeight)
  114. 				this.camera.updateProjectionMatrix(); //更新相机！！！	
  115. 			},
  116. 			aler() {
  117. 				this.heightOld = window.innerHeight
  118. 				this.widthOld = window.innerWidth
  119. 				this.Newaspect = window.innerWidth / window.innerWidth
  120. 				this.camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 0.1, 10000);
  121. 				this.renderer = new THREE.WebGLRenderer({
  122. 					alpha: true,
  123. 					antialias: true
  124. 				})
  125. 				this.renderer.setSize(window.innerWidth, window.innerHeight)
  126. 			},
  127. 			changeClothes() {
  128. 				let that = this
  129. 				this.camera.aspect = this.Newaspect;
  130. 				this.renderer.setSize(this.widthOld, this.widthOld)
  131. 				this.camera.updateProjectionMatrix(); //更新相机！！！
  132. 				console.log(this.camera)
  133. 				// that.render()
  134. 			},
  135. 			//切换衣服
  136. 			switching_model(num, path) {
  137. 				const loader = new FBXLoader();
  138. 				let that = this
  139. 				loader.load(path, (newPants) => {
  140. 						that.model.traverse((child) => {
  141. 							if (child.name == num) {
  142. 								let newPantsGroup = null
  143. 								newPants.traverse((newchild) => {
  144. 									console.log(newchild.name)
  145. 									if (newchild.name == num) {
  146. 										newPantsGroup = newchild;
  147. 									}
  148. 								})
  149. 								console.log(newPantsGroup)
  150. 								child.material = newPantsGroup.material
  151. 								child.material.needsUpdate = true;
  152. 							}
  153.  
  154. 						})
  155. 						that.renderer.render(that.scene, that.camera);
  156.  
  157. 					}), undefined,
  158. 					function(error) {
  159. 						console.error(error);
  160. 					}, undefined,
  161. 					function(error) {
  162. 						console.error(error);
  163. 					}
  164. 			},
  165. 			/**
  166. 			 * 执行渲染操作
  167. 			 */
  168. 			render() {
  169. 				this.renderer.render(this.scene, this.camera)
  170. 				this.controls.update()
  171. 				requestAnimationFrame(this.render.bind(this))
  172. 				//更新动画
  173. 				if (this.mixer) {
  174. 					this.mixer.update(0.01)
  175. 				}
  176. 			}
  177. 		},
  178. 		mounted() {
  179. 			this.init()
  180. 		}
  181. 	}
  182. </script>

样式代码

  1. <style lang="scss">
  2. 	#canvas {
  3. 		text-align: center;
  4. 		height: 100vh;
  5. 		display: flex;
  6. 		align-items: center;
  7. 		justify-content: center;
  8.  
  9. 	}
  10. </style>

        完整代码如下，FBX我引入的是本地的，大家如果有需要可以去网上找一些开源的文件

     

  1. <template>
  2. 	<view>
  3. 		<button @click="changeClothes()">缩小</button>
  4. 		<button @click="hoMing()">归位</button>
  5. 		<button @click="changeOld('裤子','../../static/fbx/2.fbx')">切换裤子</button>
  6. 		<button @click="changeOld('卫衣','../../static/fbx/weiyi.fbx')">切换卫衣</button>
  7. 		<view id="canvas">
  8. 		</view>
  9. 		<tabbar></tabbar>
  10. 	</view>
  11. </template>
  12.  
  13. <script>
  14. 	import * as THREE from 'three'
  15. 	import {
  16. 		FBXLoader
  17. 	} from 'three/examples/jsm/loaders/FBXLoader';
  18. 	import {
  19. 		OrbitControls
  20. 	} from 'three/examples/jsm/controls/OrbitControls'
  21.  
  22. 	export default {
  23. 		name: 'HelloWorld',
  24. 		data() {
  25. 			return {
  26. 				scene: null,
  27. 				camera: null,
  28. 				renderer: null,
  29. 				model: null,
  30. 				materials: [],
  31. 				controls: null,
  32. 				mixer: null,
  33. 				meshes: [],
  34. 				newMaterial: null, //新模型的材质
  35. 				pants: null,
  36. 				manager: null,
  37. 				aspectOld: null, //旧的等宽比
  38. 				heightOld: null, //初始设备的高度
  39. 				widthOld: null, //初始设备的宽度
  40. 				Newaspect: null, //新的宽比
  41. 			}
  42. 		},
  43. 		methods: {
  44. 			/**
  45. 			 * 初始化场景、相机、灯光、模型等
  46. 			 */
  47. 			init() {
  48.  
  49. 				this.aler()
  50. 				//记录设备初始宽高
  51. 				this.scene = new THREE.Scene()
  52. 				console.log(this.camera)
  53. 				this.aspectOld = this.camera.aspect //记录设备初始等宽比！！！
  54.  
  55. 				console.log(window.innerWidth)
  56.  
  57. 				// this.camera.aspect = window.innerWidth / window.innerHeight;
  58. 				//   this.camera.updateProjectionMatrix();
  59. 				document.getElementById('canvas').appendChild(this.renderer.domElement)
  60. 				this.controls = new OrbitControls(this.camera, this.renderer.domElement)
  61. 				// this.renderer.domElement.style.height='390px'
  62. 				// this.renderer.domElement.style.width='50%'
  63.  
  64. 				this.renderer.setClearColor(0xffffff); // 设置背景颜色为白色
  65. 				// this.loading()
  66. 				this.load('../../static/fbx/boy.fbx')
  67. 				this.render()
  68. 			},
  69. 			/**
  70. 			 * 加载 FBX 模型
  71. 			 */
  72.  
  73. 			load(modelUrl) {
  74. 				let that = this
  75. 				// const loader = new FBXLoader(that.manager);
  76. 				const loader = new FBXLoader();
  77. 				loader.load(modelUrl, (fbx) => {
  78. 					console.log(fbx)
  79. 					fbx.scale.set(0.3, 0.3, 0.3)
  80.  
  81. 					this.camera.lookAt(0, 0, 0)
  82.  
  83. 					//模型居中
  84. 					const box = new THREE.Box3().setFromObject(fbx);
  85. 					const center = new THREE.Vector3();
  86. 					box.getCenter(center);
  87. 					fbx.position.sub(center);
  88. 					fbx.traverse((child) => {
  89. 						if (child.name == "Camera") {
  90. 							this.camera.position.set(child.position.x, child.position.y, child.position.z)
  91. 						}
  92. 						if (child.type == "PointLight") {
  93. 							child.intensity = 1
  94. 						}
  95. 						if (child.type == 'DirectionalLight') {
  96. 							child.intensity = 1
  97. 						}
  98. 					})
  99. 					//有动画的模型默认加载第一个动画
  100. 					if (fbx.animations.length != 0) {
  101. 						that.mixer = new THREE.AnimationMixer(fbx)
  102. 						const action = that.mixer.clipAction(fbx.animations[0])
  103. 						action.play()
  104. 						that.methse(fbx)
  105. 					}
  106. 					that.model = fbx
  107. 					that.scene.add(fbx);
  108. 				})
  109. 			},
  110. 			// 对象数据保存到数组中
  111. 			methse(fbx) {
  112. 				fbx.traverse((child) => {
  113. 					if (child instanceof THREE.Mesh) {
  114. 						this.meshes.push(child)
  115. 					}
  116. 				})
  117. 			},
  118. 			changeOld(num, path) {
  119. 				let that = this
  120. 				this.switching_model(num, path)
  121. 			},
  122. 			//页面回到默认
  123. 			hoMing() {
  124. 				this.camera.aspect = this.aspectOld;
  125. 				this.renderer.setSize(window.innerWidth, window.innerHeight)
  126. 				this.camera.updateProjectionMatrix(); //更新相机！！！	
  127. 			},
  128. 			aler() {
  129. 				this.heightOld = window.innerHeight
  130. 				this.widthOld = window.innerWidth
  131. 				this.Newaspect = window.innerWidth / window.innerWidth
  132. 				this.camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 0.1, 10000);
  133. 				this.renderer = new THREE.WebGLRenderer({
  134. 					alpha: true,
  135. 					antialias: true
  136. 				})
  137. 				this.renderer.setSize(window.innerWidth, window.innerHeight)
  138. 			},
  139. 			changeClothes() {
  140. 				let that = this
  141. 				this.camera.aspect = this.Newaspect;
  142. 				this.renderer.setSize(this.widthOld, this.widthOld)
  143. 				this.camera.updateProjectionMatrix(); //更新相机！！！
  144. 				console.log(this.camera)
  145. 				// that.render()
  146. 			},
  147. 			//切换衣服
  148. 			switching_model(num, path) {
  149. 				const loader = new FBXLoader();
  150. 				let that = this
  151. 				loader.load(path, (newPants) => {
  152. 						that.model.traverse((child) => {
  153. 							if (child.name == num) {
  154. 								let newPantsGroup = null
  155. 								newPants.traverse((newchild) => {
  156. 									console.log(newchild.name)
  157. 									if (newchild.name == num) {
  158. 										newPantsGroup = newchild;
  159. 									}
  160. 								})
  161. 								console.log(newPantsGroup)
  162. 								child.material = newPantsGroup.material
  163. 								child.material.needsUpdate = true;
  164. 							}
  165.  
  166. 						})
  167. 						that.renderer.render(that.scene, that.camera);
  168.  
  169. 					}), undefined,
  170. 					function(error) {
  171. 						console.error(error);
  172. 					}, undefined,
  173. 					function(error) {
  174. 						console.error(error);
  175. 					}
  176. 			},
  177. 			/**
  178. 			 * 执行渲染操作
  179. 			 */
  180. 			render() {
  181. 				this.renderer.render(this.scene, this.camera)
  182. 				this.controls.update()
  183. 				requestAnimationFrame(this.render.bind(this))
  184. 				//更新动画
  185. 				if (this.mixer) {
  186. 					this.mixer.update(0.01)
  187. 				}
  188. 			}
  189. 		},
  190. 		mounted() {
  191. 			this.init()
  192. 		}
  193. 	}
  194. </script>
  195.  
  196. <style lang="scss">
  197. 	#canvas {
  198. 		text-align: center;
  199. 		height: 100vh;
  200. 		display: flex;
  201. 		align-items: center;
  202. 		justify-content: center;
  203.  
  204. 	}
  205. </style>

效果如下：

个人思路： 

—————————————————————————————————————————

因为以后要换不同款式的衣服，有可能是裙子，短裤等，所以我替换的是模型的材质，如果只是固定的服装，只是颜色图案不同的话可以用最简单的替换贴图来解决。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/95910
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号