three.js在vue3中模型切换_threejs点击切换模型

项目场景：

在引入多个模型时，需要通过按钮在一个页面中展示多个不同的模型

---

解决方案：

需要设置点击按钮，在这里按钮不做过多阐述：

1. 准备两个模型

function gltfModel1() {
 loader.load("../../../../public/工厂.glb", function (gltf) {
   scene.add(gltf.scene)
 })
}

function gltfModel2() {
 // glb
 loader.load("../../../../public/aaa.glb", function (gltf) { //gltf加载成功后返回一个对象
   scene.add(gltf.scene)
 })
}
1
2
3
4
5
6
7
8
9
10
11
12

2. 点击按钮时切换

const SpanActive = (index, val) => {
 spanIndex.value = index
 clearnModel()
 document.getElementById('my-three')?.appendChild(renderer.domElement)
 if (index === 0) {
   gltfModel1()
 } else {
   gltfModel2()
 }
}
1
2
3
4
5
6
7
8
9
10

3. 清除画布

// 模型切换清除上个模型
function clearnModel() {
  if (scene !== null && scene.children.length > 3) {
    scene.children = []
    composer.removePass(outlinePass);
    // 必须要清空当前div下的canvas不然canvas会继续叠加
    const domDiv = document.getElementById('my-three')
    if (domDiv !== null) {
      domDiv.removeChild(domDiv.firstChild)
    }
    init()
    renderModel()
    render()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整代码：

<template>
  <div>
    <div class="butCheck nc-flex-wrap">
      <div class="btnPad" v-for="(span, index) in spanText" :key="index"
           :class="{ stopTextActive: spanIndex === index }" @click="SpanActive(index,span)">
        {{ span.type }}
      </div>
    </div>
    <div id="my-three"></div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'; //gltf


const {proxy} = getCurrentInstance();
onMounted(() => {
  document.getElementById('my-three')?.appendChild(renderer.domElement)
  init()
  renderModel()
  gltfModel1()
  render()
})

// 按钮
const spanText = ref([
  {type: '模型1', value: 'one'},
  {type: '模型2', value: 'two'},
])
const spanIndex = ref(0)

const SpanActive = (index, val) => {
  spanIndex.value = index
  clearnModel()
  document.getElementById('my-three')?.appendChild(renderer.domElement)
  if (index === 0) {
    gltfModel1()
  } else {
    gltfModel2()
  }
}

const width = window.innerWidth, height = window.innerHeight;
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer()
const loader = new GLTFLoader();
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
const controls = new OrbitControls(camera, renderer.domElement)

function init() {
  //光源
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(400, 200, 300);
  scene.add(directionalLight);
  
//设置相机位置
  camera.position.set(300, 300, 300);
//设置相机方向
  camera.lookAt(0, 0, 0);

//辅助坐标轴
  const axesHelper = new THREE.AxesHelper(200);//参数200标示坐标系大小，可以根据场景大小去设置
  scene.add(axesHelper);
  scene.background = new THREE.Color(0xeaeaea);

  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.antialias = true;
}

function gltfModel1() {
  loader.load("../../../../public/工厂.glb", function (gltf) {
    scene.add(gltf.scene)
  })
}

function gltfModel2() {
  // glb
  loader.load("../../../../public/aaa.glb", function (gltf) {
    scene.add(gltf.scene)
  })
}

function renderModel() {
  //渲染
  renderer.setSize(width, height)//设置渲染区尺寸
  renderer.render(scene, camera)//执行渲染操作、指定场景、相机作为参数
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
// 设置曝光度
  renderer.toneMappingExposure = 1.5; // 适当调整曝光度
  controls.minPolarAngle = Math.PI / 4; // 最小极角为 45 度
  controls.maxPolarAngle = Math.PI / 2; // 最大极角为 90 度
}

function render() {
  renderer.render(scene, camera);
  controls.update()
  requestAnimationFrame(render);
}

// 模型切换清除上个模型
function clearnModel() {
  if (scene !== null && scene.children.length > 3) {
    scene.children = []
    composer.removePass(outlinePass);
    // 必须要清空当前div下的canvas不然canvas会继续叠加
    const domDiv = document.getElementById('my-three')
    if (domDiv !== null) {
      domDiv.removeChild(domDiv.firstChild)
    }
    init()
    renderModel()
    render()
  }
}


</script>

<style scoped lang="scss">
.butCheck {
  position: absolute;
  width: 100%;
  padding: 2%;

  .btnPad {
    padding: 10px 18px;
    text-align: center;
    min-width: 100px;
    color: white;
    border: 1px solid black;
    cursor: pointer;
    margin-left: 20px;
  }

  .stopTextActive {
    background-color: #58b1fd;
    border: 1px solid #58b1fd;
  }
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147