diff --git a/src/components/ThreePerfView.vue b/src/components/ThreePerfView.vue index 01d9bae..a9fbba9 100644 --- a/src/components/ThreePerfView.vue +++ b/src/components/ThreePerfView.vue @@ -171,7 +171,8 @@ function initThree() { viewerDom.appendChild(renderer.domElement) // 摄像机 - initMode3DCamera() + // initMode3DCamera() + initMode2DCamera() // 辅助线 axesHelper = new THREE.AxesHelper(5) @@ -235,6 +236,51 @@ function handleResize(entries) { } } + +/** + * 初始化2D相机 + */ +function initMode2DCamera() { + if (camera) { + scene.remove(camera) + } + + // ============================ 创建正交相机 + const cameraNew = new THREE.OrthographicCamera( + viewerDom.clientWidth / -2, + viewerDom.clientWidth / 2, + viewerDom.clientHeight / 2, + viewerDom.clientHeight / -2, + 1, + 500 + ) + cameraNew.position.set(0, 60, 0) + cameraNew.lookAt(0, 0, 0) + cameraNew.zoom = 60 + camera = cameraNew + scene.add(camera) + + // ============================ 创建控制器 + const controlsNew = new OrbitControls( + camera, + renderer.domElement + ) + controlsNew.enableDamping = false + controlsNew.enableZoom = true + controlsNew.enableRotate = false + controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN } // 鼠标中键平移 + controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动 + controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件 + controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' } + controlsNew.panSpeed = 1 + controlsNew.keyPanSpeed = 20 // normal 7 + controlsNew.minDistance = 0.1 + controlsNew.maxDistance = 1000 + controls = controlsNew + + cameraNew.updateProjectionMatrix() +} + function initMode3DCamera() { if (camera) { scene.remove(camera)