2023.9.13今天我学习了如何把3d建模里面的模型引入到vue中，并可以实现拖动，点击的效果：

首先安装：

npm install three

相关代码如下：

<!--3d基础版，实现单个3d图形-->
<template><div><div id="content"/></div>
</template>
<script>
import * as THREE from 'three'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; //鼠标控制器export default {data() {return {scene: null,//场景camera: null,//照相机renderer: null,//渲染器raycaster: null,mesh: null,//物体mouse: null,onCLick: null,childList: null,light: null,//灯光cuModel: "", //当前选中模型mouseControls: null, //轨道控制pointLight: null, //点光源ambientLight: null, //环境光num: 0,//点击次数}},mounted() {this.init()window.addEventListener("click", this.onClick, false);},methods: {init() {// 创建场景this.createScene()// 创建照相机this.createCamera()// 创建渲染器this.createRenderer()// 创建灯光this.createLight()// 创建控制器this.createOrbitControls();// 创建物体this.createMesh()// 触发this.render()},// 创建场景createScene() {this.scene = new THREE.Scene()},// 创建照相机createCamera() {this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)this.camera.position.set(200, 200, 200)this.camera.lookAt(this.scene.position)},// 创建渲染器createRenderer() {this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(window.innerWidth, window.innerHeight)this.renderer.setClearColor(new THREE.Color(0xffffff))document.getElementById('content').appendChild(this.renderer.domElement)},// 创建灯光createLight() {this.light = new THREE.DirectionalLight({color: 'red'})this.light.position.set(100, 100, 100)this.scene.add(this.light)},// 创建物体createMesh() {let lm = new Promise((resolve, reject) => {let loader = new GLTFLoader();loader.load('model/bear.glb', (gltf) => {resolve(gltf);})})lm.then((res) => {res.scene.position.set(-100, 0, 0)res.scene.scale.set(20, 20, 20)res.scene.userData = {id: 1, name: 'bear'}this.scene.add(res.scene)this.render()})},//触发render() {this.renderer.render(this.scene, this.camera)},//创建轨道控制createOrbitControls() {//没有缩放阻尼this.mouseControls = new OrbitControls(this.camera,this.renderer.domElement); //创建控件对象this.mouseControls.addEventListener('change', () => {this.renderer.render(this.scene, this.camera)})},onClick(event) {this.raycaster = new THREE.Raycaster();this.mouse = new THREE.Vector2();this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1this.raycaster.setFromCamera(this.mouse, this.camera);const intersects = this.raycaster.intersectObjects(this.scene.children, true);if (intersects.length > 0) {const clickedObject = intersects[0].object;if (clickedObject.name === clickedObject.name) {switch (this.num) {case 0:clickedObject.material.color.set(0xff0000)this.num++;break;case 1:clickedObject.material.color.set(0x00ff00)this.num++;break;case 2:clickedObject.material.color.set(0xFFFF00)this.num++;break;default:clickedObject.material.color.set(0x0000FF)this.num -= 3}this.render()}}}}
}
</script>

 如果没有图片可以去

Three.js--》建模软件如何加载外部3D模型？_threejs加载3d模型_亦世凡华、的博客-CSDN博客