3D模型查看器

src/designer/Model3DView.vue

@@ -22,6 +22,7 @@ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import * as dat from 'three/examples/jsm/libs/lil-gui.module.min.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
 
 // DOM refs
 const canvasContainer = ref(null)
@@ -31,33 +32,26 @@ const guiPanel = ref(null)
 let scene, camera, renderer, controls
 let statsControls, axesHelper, gridHelper
 let modelGroup = new THREE.Group()
-let gui
+let gui, transformControls
 
 // 状态变量
 const state = {
-  autoRotate: false,
   showAxesHelper: true,
   showGridHelper: true,
-  cameraPosition: [0, 5, 10],
+  obj: {
-  positionX: 0,
+    position: { x: 0, y: 0, z: 0 },
-  positionY: 0,
+    rotation: { x: 0, y: 0, z: 0 },
-  positionZ: 0,
+    scale: { x: 1, y: 1, z: 1 }
-  rotationX: 0,
+  },
-  rotationY: 0,
-  rotationZ: 0,
-  scaleX: 1,
-  scaleY: 1,
-  scaleZ: 1,
   camera: {
     position: { x: 0, y: 5, z: 10 },
     rotation: { x: 0, y: 0, z: 0 }
-  }
+  },
+  mode: 'translate'
 }
 
 onMounted(() => {
-  const viewerDom = canvasContainer.value
   nextTick(() => {
-    console.log('viewerDom', viewerDom)
     initThree()
     initGUI()
   })
@@ -109,12 +103,24 @@ function initThree() {
   statsControls.dom.style.position = 'absolute'
   viewerDom.appendChild(statsControls.dom)
 
+  // 转换控制器 TransformControls
+  transformControls = new TransformControls(camera, renderer.domElement)
+  transformControls.attach(modelGroup)
+
+  // 监听控制模式变化事件
+  transformControls.addEventListener('change', () => {
+    // 当变换控件发生变化时触发，用于更新渲染
+    renderer.render(scene, camera)
+  })
+
+  transformControls.addEventListener('dragging-changed', function(event) {
+    // 在拖动开始或结束时禁用或启用轨道控制器
+    controls.enabled = !event.value
+  })
+
   // 动画循环
   function animate() {
     requestAnimationFrame(animate)
-    if (state.autoRotate) {
-      modelGroup.rotation.y += 0.01
-    }
     renderView()
   }
 
@@ -133,9 +139,6 @@ function initGUI() {
   gui = new dat.GUI({ autoPlace: false })
   guiDom.appendChild(gui.domElement)
 
-  // 自动旋转
-  gui.add(state, 'autoRotate').name('自动旋转')
-
   // 显示辅助线
   gui.add(state, 'showAxesHelper').name('显示坐标轴').onChange(val => {
     axesHelper.visible = val
@@ -146,7 +149,7 @@ function initGUI() {
   })
 
   // Position
-  const cameraPosFolder = gui.addFolder('Camera Position')
+  const cameraPosFolder = gui.addFolder('摄像机位置')
   cameraPosFolder.add(state.camera.position, 'x', -100, 100).step(0.1).listen().onChange(val => {
     camera.position.x = val
   })
@@ -158,7 +161,7 @@ function initGUI() {
   })
 
   // Rotation (in radians)
-  const cameraRotationFolder = gui.addFolder('Camera Rotation')
+  const cameraRotationFolder = gui.addFolder('摄像机旋转角')
   cameraRotationFolder.add(state.camera.rotation, 'x', -Math.PI, Math.PI).listen().onChange(val => {
     camera.rotation.x = val
   })
@@ -172,40 +175,44 @@ function initGUI() {
 
   // Position
   const positionFolder = gui.addFolder('Position')
-  positionFolder.add(state, 'positionX', -10, 10).onChange(val => {
+  positionFolder.add(state.obj.position, 'x', -10, 10).onChange(val => {
     modelGroup.position.x = val
   })
-  positionFolder.add(state, 'positionY', -10, 10).onChange(val => {
+  positionFolder.add(state.obj.position, 'y', -10, 10).onChange(val => {
     modelGroup.position.y = val
   })
-  positionFolder.add(state, 'positionZ', -10, 10).onChange(val => {
+  positionFolder.add(state.obj.position, 'z', -10, 10).onChange(val => {
     modelGroup.position.z = val
   })
 
   // Rotation (in radians)
   const rotationFolder = gui.addFolder('Rotation')
-  rotationFolder.add(state, 'rotationX', -Math.PI, Math.PI).onChange(val => {
+  rotationFolder.add(state.obj.rotation, 'x', -Math.PI, Math.PI).onChange(val => {
     modelGroup.rotation.x = val
   })
-  rotationFolder.add(state, 'rotationY', -Math.PI, Math.PI).onChange(val => {
+  rotationFolder.add(state.obj.rotation, 'y', -Math.PI, Math.PI).onChange(val => {
     modelGroup.rotation.y = val
   })
-  rotationFolder.add(state, 'rotationZ', -Math.PI, Math.PI).onChange(val => {
+  rotationFolder.add(state.obj.rotation, 'z', -Math.PI, Math.PI).onChange(val => {
     modelGroup.rotation.z = val
   })
 
   // Scale
   const scaleFolder = gui.addFolder('Scale')
-  scaleFolder.add(state, 'scaleX', 0.001, 10).onChange(val => {
+  scaleFolder.add(state.obj.scale, 'x', 0.001, 10).onChange(val => {
     modelGroup.scale.x = val
   })
-  scaleFolder.add(state, 'scaleY', 0.001, 10).onChange(val => {
+  scaleFolder.add(state.obj.scale, 'y', 0.001, 10).onChange(val => {
     modelGroup.scale.y = val
   })
-  scaleFolder.add(state, 'scaleZ', 0.001, 10).onChange(val => {
+  scaleFolder.add(state.obj.scale, 'z', 0.001, 10).onChange(val => {
     modelGroup.scale.z = val
   })
 
+  gui.add(state, 'mode', ['translate', 'rotate', 'scale']).onChange(function(value) {
+    transformControls.setMode(value)
+  })
+
   // 相机位置
   // const cameraFolder = gui.addFolder('相机位置')
   // cameraFolder.add(state.cameraPosition, 0, -10, 10).name('X')
@@ -269,9 +276,13 @@ function initMode3DCamera() {
   const cameraNew = new THREE.PerspectiveCamera(25, viewerDom.clientWidth / viewerDom.clientHeight, 1, 2000)
   //设置相机位置
   // cameraNew.position.set(4, 2, -3);
-  cameraNew.position.set(30, 30, 30)
+  // cameraNew.position.set(30, 30, 30)
+  // 2.4,30,1.5;
+  cameraNew.position.set(2.4, 20, 1.5)
   //设置相机方向
-  cameraNew.lookAt(0, 0, 0)
+  // cameraNew.lookAt(0, 0, 0)
+  // -1.57,0,1.57
+  cameraNew.rotation.set(-1.57, 0, 1.57)
 
   camera = cameraNew
   scene.add(camera)