threejs展示glb模型

原模型为rvt模型


<template><div ref="threeJsContainer"class="three-js-container"></div>
</template>  <script>  
import { defineComponent } from "vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DragControls } from "three/examples/jsm/controls/DragControls";
import { onMounted, ref, onUnmounted } from "vue";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
export default {name: 'ThreeJsScene',mounted () {this.initThreeJS();},methods: {initThreeJS () {// 创建场景  const scene = new THREE.Scene();const url = "/glb/1.glb";// 创建相机  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 创建渲染器  const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素添加到Vue组件的容器中  this.$refs.threeJsContainer.appendChild(renderer.domElement);// 创建几何体  // const geometry = new THREE.BoxGeometry(1, 1, 1);// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// const cube = new THREE.Mesh(geometry, material);// scene.add(cube);// 添加环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);//添加坐标轴// const axesHelper = new THREE.AxesHelper(5)// scene.add(axesHelper)//添加轨道控制器const controls = new OrbitControls(camera, renderer.domElement);// 加载 glb 格式的 3D 模型const loader = new GLTFLoader();const dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath("/gltf/");dracoLoader.preload();loader.setDRACOLoader(dracoLoader);loader.load(url,(gltf) => {console.log('------------')console.log(gltf)// 加载成功后的回调函数const model = gltf.scene;model.scale.set(0.8, 0.8, 0.8); // 缩小模型const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(new THREE.Vector3());model.position.sub(center); // 将模型位置移到原点处scene.add(model);// 创建DragControls实例 拖动模型// const controls = new DragControls([model], camera, renderer.domElement);//controls.addEventListener('dragstart', (event) => {// 拖动开始时的事件处理  //console.log('Drag started:', event.object);// 可以从 event 对象中获取有关拖动开始的信息  //});},(xhr) => {// 加载过程中的回调函数console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// 加载失败的回调函数console.error("Failed to load model", error);});// 渲染循环  const animate = () => {requestAnimationFrame(animate);// 更新物体或相机位置  // cube.rotation.x += 0.01;// cube.rotation.y += 0.01;// 渲染场景  renderer.render(scene, camera);};animate();// 窗口大小变化时调整相机和渲染器大小  window.addEventListener('resize', onWindowResize, false);window.addEventListener('click', onMouseClick, false);function onWindowResize () {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function onMouseClick (event) {event.preventDefault();const mouseX = (event.clientX / window.innerWidth) * 2 - 1;const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;const vector = new THREE.Vector2(mouseX, mouseY);// vector.unproject(camera);const raycaster = new THREE.Raycaster();raycaster.setFromCamera(vector, camera);const intersects = raycaster.intersectObjects(scene.children, true);// 如果有交点  if (intersects.length > 0) {// 获取最近的交点  const intersect = intersects[0];// 获取相交的物体  const object = intersect.object;// 改变物体的材质以实现高亮效果  // 可以改变颜色或透明度  object.material.color.set(0xff0000); // 设置为红色以高亮  object.material.needsUpdate = true; // 更新材质  }}},},};
</script>  <style scoped>
.three-js-container {width: 100%;height: 100%;
}
</style>