THRRJS操作工具

package.json

@@ -58,6 +58,7 @@
     "@tresjs/cientos": "3.8.0",
     "@tresjs/core": "4.2.1",
     "@tresjs/leches": "^0.14.0",
+    "@turf/turf": "^7.0.0",
     "@tweenjs/tween.js": "^23.1.2",
     "@vicons/carbon": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
@@ -82,6 +83,7 @@
     "iconify-icon": "^2.1.0",
     "jszip": "^3.10.1",
     "lamina": "^1.1.23",
+    "lodash": "^4.17.21",
     "lygia": "^1.1.3",
     "naive-ui": "^2.39.0",
     "oimophysics": "^1.2.2",
@@ -97,6 +99,7 @@
     "three-subdivide": "^1.1.5",
     "three.quarks": "^0.15.0",
     "tilebelt-wgs84": "^1.0.4",
+    "turf": "^3.0.14",
     "tweakpane": "4.0.4",
     "unocss": "^0.58.9",
     "vite-plugin-javascript-obfuscator": "^3.1.0",

src/plugins/basic/pages/shine/effectComposerShaderPass.vue

@@ -1,32 +0,0 @@
-<!--
- * @Description: 
- * @Version: 1.668
- * @Autor: 地虎降天龙
- * @Date: 2024-01-09 15:02:26
- * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-07-18 10:38:20
--->
-
-<template>
-    <TresCanvas renderMode="manual" window-size ref="tcRef">
-        <TresPerspectiveCamera :position="[10, 10, 10]" />
-        <TresAmbientLight :intensity="1" />
-        <OrbitControls />
-        <TresGridHelper :args="[10, 10]" />
-        <ecLayerShaderPass />
-    </TresCanvas>
-</template>
-
-<script setup lang="ts">
-import { OrbitControls } from '@tresjs/cientos'
-import ecLayerShaderPass from '../../components/ecLayerShaderPass.vue'
-import { watchEffect, ref } from 'vue'
-
-const tcRef = ref()
-watchEffect(() => {
-    if (tcRef.value) {
-        let renderer = tcRef.value.context.renderer.value
-        renderer.autoClear = false
-    }
-})
-</script>

src/plugins/earthSample/pages/lowpolyPlanet.vue

@@ -1,47 +0,0 @@
-<!--
- * @Description: 
- * @Version: 1.668
- * @Autor: Hawk
- * @Date: 2023-10-13 09:04:49
- * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-03-12 19:54:32
--->
-<script setup lang="ts">
-import { useRenderLoop } from '@tresjs/core'
-import { OrbitControls, Stars } from '@tresjs/cientos'
-import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
-import { shallowRef } from 'vue'
-
-import loading from 'PLS/UIdemo/components/loading/default.vue'
-import Planet from '../components/lowpolyPlanet/planet.vue'
-
-const gl = {
-	clearColor: '#11101B',
-	shadows: true,
-	alpha: false,
-	outputColorSpace: SRGBColorSpace,
-	shadowMapType: PCFSoftShadowMap,
-	useLegacyLights: true,
-}
-const yRotation = shallowRef(0)
-useRenderLoop().onLoop(({ delta }) => {
-	yRotation.value += 0.02 * delta
-})
-</script>
-
-<template>
-	<loading />
-	<TresCanvas v-bind="gl" window-size>
-		<TresPerspectiveCamera :position="[0, 1, 5]" :fov="75" :near="0.1" :far="1000" />
-		<OrbitControls />
-
-		<TresAmbientLight color="#484068" :intensity="1" />
-		<Suspense>
-			<Planet />
-		</Suspense>
-		<Stars :rotation="[0, yRotation, 0]" :radius="50" :depth="50" :count="5000" :size="0.3" :size-attenuation="true" />
-		<TresPointLight color="#1BFFEF" :position="[0, 0, -8]" :intensity="80" cast-shadow />
-		<TresDirectionalLight :position="[0, 2, 4]" :intensity="3" cast-shadow :shadow-mapSize-width="2048"
-			:shadow-mapSize-height="2048" />
-	</TresCanvas>
-</template>

src/plugins/operationTool/components/drawArrows.vue

@@ -0,0 +1,70 @@
+<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()
+
+let mouse = new THREE.Vector2()
+let points = []
+let polygonMesh = null
+const planeGeometry = new THREE.PlaneGeometry(100, 100)
+const planeMaterial = new THREE.MeshBasicMaterial({ visible: false })
+const plane = new THREE.Mesh(planeGeometry, planeMaterial)
+scene.value.add(plane)
+let init = function () {
+    window.addEventListener('click', onMouseClick, false)
+}
+
+let onMouseClick = function (event) {
+    // 将鼠标坐标转换到[-1, 1]范围
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
+    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
+
+    // 使用raycaster检测鼠标点击的位置
+    raycaster.value.setFromCamera(mouse, camera.value)
+
+    // 默认点击在Z=0的平面上
+    const intersects = raycaster.value.intersectObject(plane)
+    if (intersects.length > 0) {
+        const point = intersects[0].point
+        points.push(new THREE.Vector3(point.x, point.y, 0))
+        updatePolygon()
+    }
+}
+
+let updatePolygon = function () {
+    debugger
+    if (polygonMesh != null) {
+        scene.value.remove(polygonMesh)
+    }
+
+    if (points.length > 2) {
+        const shape = new THREE.Shape()
+        shape.moveTo(points[0].x, points[0].y)
+        for (let i = 1; i < points.length; i++) {
+            shape.lineTo(points[i].x, points[i].y)
+        }
+        shape.lineTo(points[0].x, points[0].y) // 闭合多边形
+        const geometry = new THREE.ShapeGeometry(shape)
+        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
+        polygonMesh = new THREE.Mesh(geometry, material)
+        scene.value.add(polygonMesh)
+    }
+}
+
+onMounted(() => {
+    init()
+})
+watchEffect(() => {})
+</script>
+<style>
+</style>

src/plugins/operationTool/components/frameSelect.vue

@@ -0,0 +1,73 @@
+<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()
+
+let selectionBox = new SelectionBox(camera.value, scene.value)
+let helper = new SelectionHelper(renderer.value, 'selectBox')
+let init = function () {
+    document.addEventListener('mousedown', onMouseDown, false)
+    document.addEventListener('mousemove', onMouseMove, false)
+    document.addEventListener('mouseup', onMouseUp, false)
+}
+
+let onMouseDown = function (event) {
+
+    console.log(controls.value);
+    
+    for (const item of selectionBox.collection) {
+        if (item instanceof THREE.Mesh) {
+            item.material.emissive.set(0x000000)
+        }
+    }
+    selectionBox.collection.length = 0
+    selectionBox.startPoint.set((event.clientX / sizes.width.value) * 2 - 1, -(event.clientY / sizes.height.value) * 2 + 1, 0.5)
+}
+
+let onMouseMove = function (event) {
+    if (helper.isDown) {
+       
+        selectionBox.endPoint.set((event.clientX / sizes.width.value) * 2 - 1, -(event.clientY / sizes.height.value) * 2 + 1, 0.5)
+        const allSelected = selectionBox.select()
+        console.log("allSelected",allSelected);
+        
+        for (let i = 0; i < allSelected.length; i++) {
+            let item = allSelected[i]
+            if (item instanceof THREE.Mesh) {
+                item.material.emissive.set(0xf80000)
+            }
+        }
+    }
+}
+
+let onMouseUp = function (event) {
+    const allSelected = selectionBox.select()
+    selectionBox.endPoint.set((event.clientX / sizes.width.value) * 2 - 1, -(event.clientY / sizes.height.value) * 2 + 1, 0.5)
+    for (let i = 0; i < allSelected.length; i++) {
+        let item = allSelected[i]
+        if (item instanceof THREE.Mesh) {
+            item.material.emissive.set(0x000000)
+        }
+    }
+}
+onMounted(() => {
+    init()
+})
+watchEffect(() => {})
+</script>
+<style>
+.selectBox {
+    border: 1px solid #55aaff;
+    background-color: rgba(75, 160, 255, 0.3);
+    position: fixed;
+}
+</style>

src/plugins/operationTool/config.js

@@ -0,0 +1,16 @@
+
+export default {
+	"name": "operationTool",
+	"title": "THREE操作工具",
+	"intro": "THREE操作工具",
+	"version": "0.0.1",
+	"author": "Jsonco",
+	"website": "icegl.cn",
+	"state": "active",
+	"require": [],
+	"preview": [
+		{ "src": "plugins/operationTool/image/炸开.png", "type": "img", "name": "explode", "title": "炸开与还原" },
+		{ "src": "plugins/operationTool/image/框选.png", "type": "img", "name": "frameSelect", "title": "框选实例" },
+		// { "src": "plugins/AMapGIS/preview/cubeMesh.png", "type": "img", "name": "drawArrows", "title": "绘制箭头" },
+	]
+}

src/plugins/operationTool/pages/drawArrows.vue

@@ -0,0 +1,38 @@
+
+<template>
+    <TresCanvas clearColor="#201919" window-size v-bind="state">
+        <TresPerspectiveCamera :fov="60" :near="0.1" :far="2000" :position="[0, 10, -28]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls v-bind="controlsState" />
+        <Suspense>
+           <drawArrows />
+        </Suspense>
+    </TresCanvas>
+</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 drawArrows from  "../components/drawArrows.vue"
+
+const state = reactive({
+    // windowSize: true,
+    alpha: true,
+    antialias: true,
+    autoClear: false,
+    disableRender: true,
+})
+const controlsState = reactive({
+    enableDamping: false,
+    enableZoom: false,
+    autoRotate: false,
+    enablePan: false,
+    enableRotate: false,
+})
+</script>
+
+<style >
+
+</style>

src/plugins/operationTool/pages/explode.vue

@@ -0,0 +1,114 @@
+
+<template>
+    <TresCanvas clearColor="#201919" window-size v-bind="state">
+        <TresPerspectiveCamera :fov="60" :near="0.1" :far="2000" :position="[0, 10, -28]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls />
+        <Suspense>
+            <primitive :object="model" />
+        </Suspense>
+    </TresCanvas>
+</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 * as TWEEN from '@tweenjs/tween.js'
+import _ from 'Lodash'
+import * as THREE from 'three'
+
+const { scene: model, nodes } = await useGLTF('/plugins/operationTool/model/湖中小亭/湖中小亭.gltf')
+    model.updateMatrixWorld(true) // 强制更新
+let ifExplode = false
+const state = reactive({
+    // windowSize: true,
+    alpha: true,
+    antialias: true,
+    autoClear: false,
+    disableRender: true,
+})
+const buildingsLinesState = reactive({
+    width: 1.0,
+    color: '#000',
+    opacity: 1.0,
+    show: true,
+})
+const  disintegrate = function () {
+    model.children.forEach((child, index) => {
+        if (child.isMesh) {
+            const boundingBox = new THREE.Box3().setFromObject(child)
+            const childCenter = new THREE.Vector3()
+            boundingBox.getCenter(childCenter)
+            // let pos = childCenter.multiplyScalar(2);
+            new TWEEN.Tween(childCenter)
+                .to(new THREE.Vector3(0,0,0), 3000)
+                .onUpdate((val) => {
+                    child.position.copy(val)
+                })
+                .start()
+                .onComplete((val) => {
+                    
+                })
+        }
+    })
+}
+const explode = function () {
+    model.children.forEach((child, index) => {
+        let origin = _.cloneDeep(child.position)
+        child.userData.explode = {
+            state: false,
+            explode: origin,
+        }
+        if (child.isMesh) {
+            const boundingBox = new THREE.Box3().setFromObject(child)
+            const childCenter = new THREE.Vector3()
+            boundingBox.getCenter(childCenter)
+            let pos = childCenter.multiplyScalar(2);
+            new TWEEN.Tween(origin)
+                .to(pos, 3000)
+                .onUpdate((val) => {
+                    child.position.copy(val)
+                })
+                .start()
+                .onComplete((val) => {
+                    
+                })
+        }
+    })
+}
+onMounted(() => {
+   
+    const paneControl = new Pane({
+        title: '炸开与还原',
+        expanded: true,
+    })
+    // paneControl.containerElem_.style.top = '54px'
+
+    const f1 = paneControl.addFolder({
+        title: '参数',
+    })
+ 
+    f1.addButton({
+        title: '炸开',
+        label: '炸开', // optional
+    }).on('click', () => {
+       explode()
+    })
+     f1.addButton({
+        title: '还原',
+        label: '还原', // optional
+    }).on('click', () => {
+       disintegrate()
+    })
+})
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+    TWEEN.update()
+    //循环render
+})
+</script>
+
+<style scoped>
+</style>

src/plugins/operationTool/pages/frameSelect.vue

@@ -0,0 +1,39 @@
+
+<template>
+    <TresCanvas clearColor="#201919" window-size v-bind="state">
+        <TresPerspectiveCamera :fov="60" :near="0.1" :far="2000" :position="[0, 10, -28]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls v-bind="controlsState" />
+        <Suspense>
+           <FrameSelect/>
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted, ref } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import FrameSelect from  "../components/frameSelect.vue"
+let ifExplode = false
+const state = reactive({
+    // windowSize: true,
+    alpha: true,
+    antialias: true,
+    autoClear: false,
+  
+})
+const controlsState = reactive({
+    enableDamping: false,
+    enableZoom: false,
+    autoRotate: false,
+    enablePan: false,
+    enableRotate: false,
+	makeDefault: true,
+})
+
+
+</script>
+
+<style >
+
+</style>

src/plugins/operationTool/shaders/buildingModels.frag

@@ -0,0 +1,119 @@
+precision highp float;
+uniform float u_opacity;
+uniform vec4 u_baseColor;
+uniform vec4 u_color;
+uniform vec4 u_brightColor;
+uniform vec4 u_windowColor;
+
+uniform float u_zoom;
+uniform float u_time;
+uniform float u_near;
+uniform float u_far;
+varying vec2 v_texCoord;
+varying vec4 v_color;
+varying float v_lightWeight;
+
+vec3 getWindowColor(float n,float hot,vec3 brightColor,vec3 darkColor){
+	float s=step(hot,n);
+	vec3 color=mix(brightColor,vec3(1.,1.,1.),n);
+	return mix(darkColor,color,s);
+}
+
+float random(vec2 st){
+	return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);
+}
+
+float LinearizeDepth()
+{
+	float z=gl_FragCoord.z*2.-1.;
+	return(2.*u_near*u_far)/(u_far+u_near-z*(u_far-u_near));
+}
+
+vec3 fog(vec3 color,vec3 fogColor,float depth){
+	float fogFactor=clamp(depth,0.,1.);
+	vec3 output_color=mix(fogColor,color,fogFactor);
+	return output_color;
+}
+
+float sdRect(vec2 p,vec2 sz){
+	vec2 d=abs(p)-sz;
+	float outside=length(max(d,0.));
+	float inside=min(max(d.x,d.y),0.);
+	return outside+inside;
+}
+
+void main(){
+	if(v_color.w==0.){
+		discard;
+		return;
+	}
+	vec3 baseColor=u_color.xyz;
+	vec3 brightColor=u_brightColor.xyz;
+	vec3 windowColor=u_windowColor.xyz;
+	float targetColId=5.;
+	float depth=1.-LinearizeDepth()/u_far*u_zoom;// 深度，调节明暗，远的颜色暗，近的颜色亮
+	vec3 fogColor=vec3(23./255.,31./255.,51./255.);
+	
+	if(v_texCoord.x<0.){//顶部颜色
+		vec3 foggedColor=fog(baseColor.xyz+vec3(.12*.9,.2*.9,.3*.9),fogColor,depth);
+		gl_FragColor=vec4(foggedColor,v_color.w*u_opacity);
+	}else{// 侧面颜色
+		
+		if(u_zoom<14.){
+			gl_FragColor=v_color;
+			return;
+		}
+		
+		if(v_texCoord.x<.01||v_texCoord.x>.99||v_texCoord.y<.01){
+			gl_FragColor=vec4(1.,.7,.25,.5);
+			return;
+		}
+		
+		vec2 st=v_texCoord;
+		vec2 UvScale=v_texCoord;
+		vec2 tStep=vec2(.05,.125);
+		vec2 tStart=vec2(tStep.x*.25,tStep.y*.25);
+		vec2 tEnd=vec2(tStep.x*.75,tStep.y*.75);
+		
+		float u=mod(UvScale.x,tStep.x);
+		float v=mod(UvScale.y,tStep.y);
+		float ux=floor(UvScale.x/tStep.x);
+		float uy=floor(UvScale.y/tStep.y);
+		float n=random(vec2(ux,uy));
+		float lightP=u_time;
+		float head=1.-step(.005,st.y);
+		/*step3*/
+		// 将窗户颜色和墙面颜色区别开来
+		float sU=step(tStart.x,u)-step(tEnd.x,u);
+		float sV=step(tStart.y,v)-step(tEnd.y,v);
+		vec2 windowSize=vec2(abs(tEnd.x-tStart.x),abs(tEnd.y-tStart.y));
+		float dist=sdRect(vec2(u,v),windowSize);
+		float s=sU*sV;
+		
+		float curColId=ux;// floor(UvScale.x / tStep.x);
+		float sCol=step(targetColId-.2,curColId)-step(targetColId+.2,curColId);
+		
+		float mLightP=mod(lightP,2.);
+		float sRow=step(mLightP-.2,st.y)-step(mLightP,st.y);
+		if(ux==targetColId){
+			n=0.;
+		}
+		// float hot = min(1.0, abs (sin(u_time/6.0) ) );
+		// float hot = smoothstep(1.0,0.0,timeP);
+		//hot = clamp(hot,0.2,0.8);
+		vec3 color=mix(baseColor,getWindowColor(n,u_time,brightColor,windowColor),s);
+		
+		float sFinal=s*sCol*sRow;
+		color+=mix(baseColor,brightColor,sFinal*n);
+		
+		if(head==1.){// 顶部亮线
+			color=brightColor;
+		}
+		color=color*v_lightWeight;
+		
+		vec3 foggedColor=fog(color,fogColor,depth);
+		
+		gl_FragColor=vec4(foggedColor,1.);
+	}
+	
+}

src/plugins/operationTool/shaders/buildingModels.vert

@@ -0,0 +1,47 @@
+precision highp float;
+#define ambientRatio .5
+#define diffuseRatio .4
+#define specularRatio .1
+
+attribute vec2 faceUv;
+uniform vec4 u_color;
+varying vec2 v_texCoord;
+varying vec4 v_color;
+varying float v_lightWeight;
+
+void main(){
+	
+	mat4 matModelViewProjection=projectionMatrix*modelViewMatrix;
+	
+	v_texCoord=faceUv;
+	
+	if(normal==vec3(0.,0.,1.)){
+		v_color=u_color;
+		gl_Position=matModelViewProjection*vec4(position,1.);
+		return;
+	}
+	
+	vec3 worldPos=vec3(vec4(position,1.)*modelMatrix);
+	vec3 worldNormal=vec3(vec4(normal,1.)*modelMatrix);// N
+	// //cal light weight  光亮度的权重
+	vec3 viewDir=normalize(cameraPosition-worldPos);// V
+	// 光照的方向， 前上方    Ild = k*I*(N·L)
+	vec3 lightDir=normalize(vec3(0.,-10.,1.));// L
+	vec3 halfDir=normalize(viewDir+lightDir);
+	// //lambert
+	float lambert=dot(worldNormal,lightDir);
+	//specular  //反射
+	float specular=pow(max(0.,dot(worldNormal,halfDir)),32.);
+	//sum to light weight  （lambert + 环境光）  Idiff = Iad + Ild = k*Ia + k*Il*（N·L）
+	float lightWeight=ambientRatio+diffuseRatio*lambert+specularRatio*specular;
+	v_texCoord=faceUv;
+	v_lightWeight=lightWeight;
+	
+	// 根据光照方向，调整光线明暗
+	
+	// v_lightWeight =  pow( 0.0 + 1.0 * abs(dot(worldNormal, worldPos)), 2.0);
+	
+	v_color=vec4(u_color.rgb*v_lightWeight,u_color.w);
+	
+	gl_Position=matModelViewProjection*vec4(position,1.);
+}

src/plugins/operationTool/stores/mapStore.js

@@ -0,0 +1,19 @@
+/*
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-02-21 14:31:55
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-02-22 10:11:00
+ */
+import { defineStore } from 'pinia'
+import { shallowRef } from 'vue'
+
+export const useMapStore = defineStore('mapStore', () => {
+	const aMap = shallowRef(null)
+	const mapHandle = shallowRef(null)
+	const cameraState = shallowRef(null)
+
+	//导出参数
+	return { aMap, mapHandle, cameraState }
+})