基于three.js的3D换装

已完成

2024-01-16

阅读

63

未经作者授权,禁止转载

3D换装,three.js,vue

需要完整源码,请加我微信:lookgxl


核心代码:


changeBody(type) {
  let nowType = this.nowType
  const loader = new GLTFLoader()
  loader.load(`${process.env.BASE_URL}static/model/${type}.glb`, gltf => {
    // 如果模型不为空,则先将原有的模型从组中删除掉
    if (this.body_model) {
      this.modelGroup.remove(this.body_model)
    }
    const model = gltf.scene
    // 给模型重新赋值并添加到组中
    this.body_model = model
    this.modelGroup.add(this.body_model)
    model.position.y = this.position_y
    model.traverse(o => {
      if (o.isMesh && o.name === 'Wolf3D_Body') {
        o.material.color = new THREE.Color(new THREE.Color('#996144'))
        // o.material.color = new THREE.Color(new THREE.Color(this.skinColor)) // 这里也可以将skinColor做成一个动态值实现换肤色的功能
      }
      if (o.isMesh) {
        o.castShadow = true
      }
    })
    this.nowType = type
  })
},
奇乐实验室

持续学习

演示demo入口

demo链接

当前项目进度

100%