导航

src/plugins/operationTool/components/drawArrows.vue

@@ -43,10 +43,6 @@ let onMouseClick = function (event) {
             case 'line':
                 updatePolygonLine(intersects[0].normal)
                 break
-            case 'face':
-                debugger
-                updatePolygonFace(intersects[0].normal)
-                break
         }
     }
 }
@@ -78,8 +74,7 @@ let updatePolygonFace = function (normal) {
         // 计算终点两边的两个点
         const pointLeft = new THREE.Vector3().addVectors(points[1], offset)
         const pointRight = new THREE.Vector3().subVectors(points[1], offset)
-        console.log(pointLeft,pointRight);
-        
+        console.log(pointLeft, pointRight)
 
         // drawTriangle()
         points.length = 0
@@ -155,25 +150,17 @@ let initUI = function () {
     // paneControl.containerElem_.style.top = '54px'
 
     const f1 = paneControl.addFolder({
-        title: '参数',
+        title: '参数(鼠标间断点两个点，分别作为箭头的起点)',
     })
 
     f1.addButton({
-        title: '线箭头',
-        label: '线箭头', // optional
+        title: '绘制箭头',
+        label: '激活', // optional
     }).on('click', () => {
         window.removeEventListener('click', onMouseClick, false)
         type = 'line'
         initLine()
     })
-    f1.addButton({
-        title: '面箭头',
-        label: '面箭头', // optional
-    }).on('click', () => {
-        window.removeEventListener('click', onMouseClick, false)
-        type = 'face'
-        initLine()
-    })
 }
 onMounted(() => {
     initUI()

src/plugins/operationTool/components/navScene.vue

@@ -0,0 +1,24 @@
+<template>
+    <primitive :object="model" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, watchEffect } from 'vue'
+import * as THREE from 'three'
+import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js'
+import { SelectionHelper } from 'three/examples/jsm/interactive/SelectionHelper'
+import { useTresContext, useRenderLoop } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+const { scene: model, nodes } = await useGLTF('/plugins/operationTool/model/湖中小亭/湖中小亭.gltf')
+const { camera, renderer, scene, sizes, raycaster, controls } = useTresContext()
+
+onMounted(() => {})
+watchEffect(() => {})
+</script>
+<style>
+.selectBox {
+    border: 1px solid #55aaff;
+    background-color: rgba(75, 160, 255, 0.3);
+    position: fixed;
+}
+</style>

src/plugins/operationTool/components/navigation.vue

@@ -0,0 +1,183 @@
+<template>
+    <canvas id="containerNav"></canvas>
+</template>
+ 
+<script setup lang="ts">
+import { onMounted, watchEffect, ref } from 'vue'
+import * as THREE from 'three'
+import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js'
+import { SelectionHelper } from 'three/examples/jsm/interactive/SelectionHelper'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+const props = withDefaults(
+    defineProps<{
+        message: any
+    }>(),
+    {},
+)
+let scene = null
+let camera = null
+let renderer = null
+let container = null
+let cube = null
+let initSence = () => {
+    container = document.getElementById('containerNav')
+    scene = new THREE.Scene()
+    scene.background = new THREE.Color('#f7f7f9')
+    camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 10000)
+    camera.position.z = 2500
+    renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        canvas: container,
+    })
+    renderer.setSize(container.clientWidth, container.clientHeight)
+
+    renderer.setPixelRatio(window.devicePixelRatio)
+    // container.appendChild(renderer.domElement);
+    // 添加光源
+    var light = new THREE.AmbientLight(0xffffff)
+    scene.add(light)
+
+    // 添加平行光源
+    var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
+    directionalLight.position.set(1, 1, 1).normalize()
+    scene.add(directionalLight)
+
+    const orbit = new OrbitControls(camera, renderer.domElement)
+    orbit.enableDamping = true // 启用阻尼
+    orbit.dampingFactor = 0.05 // 设置阻尼因子
+    orbit.enabled = true //scope.enableZoom = true;
+    orbit.enableZoom = true //enableRotate enablePan
+    orbit.enableRotate = true
+    orbit.enablePan = false
+    // 添加 AxesHelper
+    const axesHelper = new THREE.AxesHelper(5) // 参数为轴的长度
+    scene.add(axesHelper)
+
+    function animate() {
+        requestAnimationFrame(animate)
+        renderer.render(scene, camera)
+    }
+
+    // 启动动画循环
+    animate()
+}
+let createNav = () => {
+    let geometry = new THREE.BoxGeometry(1800, 1800, 1800)
+    let materials = createMetrial()
+    cube = new THREE.Mesh(geometry, materials)
+    cube.position.set(0, 0, 0)
+    scene.add(cube)
+    initEvent(materials)
+}
+let createMetrial = () => {
+    // 创建立方体的每个面的材质
+    const CANVAS_SIZE = 256
+    let materials = []
+    let aa = ['右', '左', '上', '下', '前', '后']
+    aa.forEach(function (text) {
+        // 创建一个canvas元素
+        var canvas = document.createElement('canvas')
+        canvas.width = CANVAS_SIZE
+        canvas.height = CANVAS_SIZE
+        // 获取canvas的2d绘图上下文
+        var context = canvas.getContext('2d')
+        // context.fillStyle = '#f0f0f0';  // 设置填充颜色为白色
+        context.fillStyle = '#f6fcff' // 设置填充颜色为白色
+        context.fillRect(0, 0, canvas.width, canvas.height) // 填充整个canvas
+        // 在canvas上绘制文字
+        context.fillStyle = 'black' // 将文字颜色改为红色
+        // context.font = 'bold 200px serif';  // 将文字大小改为96px
+        context.font = 'bold 100px arial'
+        context.textAlign = 'center' // 设置文字对齐方式为居中
+        context.textBaseline = 'middle' // 设置文字基线为中线
+        context.fillText(text, canvas.width / 2, canvas.height / 2) // 将文字绘制在canvas的中心
+        // 创建一个纹理
+        // 使用canvas作为纹理
+        var texture = new THREE.Texture(canvas)
+        texture.needsUpdate = true
+
+        // 使用MeshStandardMaterial以支持高光效果
+        var material = new THREE.MeshStandardMaterial({
+            map: texture,
+            color: 0xffffff,
+            emissive: 0x000000,
+            side: THREE.DoubleSide,
+        })
+        materials.push(material)
+    })
+    return materials
+}
+let initEvent = (materials) => {
+    // 鼠标悬停高亮效果
+    var raycaster = new THREE.Raycaster()
+    var mouse = new THREE.Vector2()
+    function onClick(event) {
+        // document.getElementById("containerNav").style =
+        //   "cursor: grabbing !important";
+        // 计算鼠标位置的归一化设备坐标
+        mouse.x = (event.offsetX / container.clientWidth) * 2 - 1
+        mouse.y = -(event.offsetY / container.clientHeight) * 2 + 1
+
+        // 通过相机和鼠标位置更新射线
+        raycaster.setFromCamera(mouse, camera)
+
+        // 计算物体和射线的交点
+        var intersects = raycaster.intersectObjects([cube])
+
+        // 遍历交点，将相应面的材质高亮
+        for (var i = 0; i < materials.length; i++) {
+            materials[i].emissive.set(0x000000) // 清除之前的高亮
+        }
+
+        if (intersects.length > 0) {
+            let index = intersects[0].face.materialIndex
+            updateMainCamera(index)
+            materials[index].emissive.set('#eb780a') // 设置高亮
+        }
+    }
+    renderer.domElement.addEventListener('click', onClick, false)
+}
+let updateMainCamera = (index) => {
+    console.log('message', props.message)
+    // return
+    let initCameraPos = 50
+    if (index == 4) {
+        //前
+        props.message.position.set(0, 0, initCameraPos)
+    } else if (index == 5) {
+        //后
+        props.message.position.set(0, 0, -initCameraPos)
+    } else if (index == 1) {
+        //下
+        props.message.position.set(-initCameraPos, 0, 0)
+    } else if (index == 0) {
+        //上
+        props.message.position.set(initCameraPos, 0, 0)
+    } else if (index == 3) {
+        //下
+        props.message.position.set(0, -initCameraPos, 0)
+    } else if (index == 2) {
+        //右
+        props.message.position.set(0, initCameraPos, 0)
+    }
+
+    props.message.lookAt(new THREE.Vector3(0, 0, 0))
+}
+onMounted(() => {
+    initSence()
+    createNav()
+})
+watchEffect(() => {})
+</script>
+<style  scoped>
+#containerNav {
+    position: absolute;
+    /* background: red; */
+
+    left: 15px;
+    bottom: 15px;
+    width: 96px;
+    height: 96px;
+    cursor: grabbing !important;
+}
+</style>

src/plugins/operationTool/config.js

@@ -11,7 +11,9 @@ export default {
 	"preview": [
 		{ "src": "plugins/operationTool/preview/炸开.png", "type": "img", "name": "explode", "title": "炸开与还原" },
 		{ "src": "plugins/operationTool/preview/框选.png", "type": "img", "name": "frameSelect", "title": "框选实例" },
-		// { "src": "plugins/AMapGIS/preview/cubeMesh.png", "type": "img", "name": "drawArrows", "title": "绘制箭头" },
+		{ "src": "plugins/operationTool/preview/箭头.png", "type": "img", "name": "drawArrows", "title": "绘制箭头" },
 		{ "src": "plugins/operationTool/preview/距离自动标注.png", "type": "img", "name": "tagging", "title": "几何体标注" },
+		{ "src": "plugins/operationTool/preview/导航.png", "type": "img", "name": "navigation", "title": "导航" },
 	]
-}
+
+}

src/plugins/operationTool/pages/navigation.vue

@@ -0,0 +1,45 @@
+
+<template>
+    <div>
+        <TresCanvas clearColor="#201919" window-size v-bind="state">
+            <TresPerspectiveCamera :fov="60" :near="0.1" :far="2000" :position="[0, 0, 50]" :look-at="[0, 0, 0]" ref="navSceneCamera" />
+            <TresAmbientLight :intensity="2" />
+            <OrbitControls v-bind="controlsState" />
+            <Suspense>
+                <navScene />
+            </Suspense>
+        </TresCanvas>
+        <navigation :message="navSceneCamera" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted, ref } from 'vue'
+import { OrbitControls, useGLTF } from '@tresjs/cientos'
+import { useRenderLoop, useTexture } from '@tresjs/core'
+import { Pane } from 'tweakpane'
+import navigation from '../components/navigation.vue'
+import navScene from '../components/navScene.vue'
+const navSceneCamera = ref(null)
+const state = reactive({
+    windowSize: true,
+    alpha: true,
+    antialias: true,
+    autoClear: false,
+    disableRender: true,
+})
+const controlsState = reactive({
+    enableDamping: true,
+    enableZoom: true,
+    enablePan: true,
+    enableRotate: true,
+    makeDefault: true,
+})
+</script>
+
+<style >
+#canvas {
+    height: 500px;
+    width: 500px;
+}
+</style>