增加了 两个地球效果

src/plugins/earthSample/components/earth.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-01 09:51:28
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-01 10:07:20
+-->
+
+<template>
+    <TresMesh>
+        <TresSphereGeometry :args="[1, 32, 32]" />
+        <TresMeshStandardMaterial :map="pTexture[0]" :bumpMap="pTexture[1]" :bumpScale="10" />
+    </TresMesh>
+</template>
+
+<script lang="ts" setup>
+import * as THREE from 'three'
+import { useTexture } from '@tresjs/core'
+
+const pTexture = await useTexture(['./plugins/earthSample/image/worldMap.jpg', './plugins/earthSample/image/wordBump.jpg'])
+pTexture[0].wrapS = pTexture[0].wrapT = pTexture[1].wrapS = pTexture[1].wrapT = THREE.RepeatWrapping
+</script>

src/plugins/earthSample/components/highlightScan.vue

@@ -0,0 +1,76 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-01 10:08:40
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-01 11:07:16
+-->
+<template>
+    <TresMesh>
+        <TresSphereGeometry :args="[1, 32, 32]" />
+        <TresShaderMaterial v-bind="tsm" />
+    </TresMesh>
+</template>
+
+<script lang="ts" setup>
+import { useRenderLoop } from '@tresjs/core'
+import * as THREE from 'three'
+import { watch } from 'vue'
+
+const props = withDefaults(
+    defineProps<{
+        color?: string
+        opacity?: number
+        speed?: number
+    }>(),
+    {
+        color: '#FFFFFF',
+        opacity: 1.0,
+        speed: 1.0,
+    },
+)
+
+const tsm = {
+    uniforms: {
+        uTime: { value: 0.0 },
+        pointNum: { value: new THREE.Vector2(32, 16) },
+        uColor: { value: new THREE.Color(props.color) },
+        uOpacity: { value: props.opacity },
+    },
+    transparent: true,
+    vertexShader: `
+									varying vec2 vUv;
+									void main(){
+										vUv=uv;
+										gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+									}`,
+    fragmentShader: `
+									float PI = acos(-1.0);
+                  uniform vec3 uColor;
+									uniform float uOpacity;
+                  uniform float uTime;
+                  varying vec2 vUv;
+                  void main(){
+										vec2 uv = vUv+ vec2(0.0, uTime);
+										float current = abs(sin(uv.y * PI));
+										gl_FragColor.rgb=uColor;
+										gl_FragColor.a = mix(1.0, 0.0, current);
+										gl_FragColor.a = gl_FragColor.a*uOpacity;
+									}`,
+}
+
+watch(
+    () => [props.color, props.opacity],
+    ([color, opacity]) => {
+        tsm.uniforms.uColor.value = new THREE.Color(color)
+        // @ts-ignore
+        tsm.uniforms.uOpacity.value = opacity
+    },
+)
+
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+    tsm.uniforms.uTime.value += delta * 0.1 * props.speed
+})
+</script>

src/plugins/earthSample/components/pointsScan.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-01 10:08:40
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-01 11:08:11
+-->
+<template>
+    <TresMesh>
+        <TresSphereGeometry :args="[1.0, 32, 32]" />
+        <TresShaderMaterial v-bind="tsm" />
+    </TresMesh>
+</template>
+
+<script lang="ts" setup>
+import { useRenderLoop } from '@tresjs/core'
+import * as THREE from 'three'
+import { watch } from 'vue'
+
+const props = withDefaults(
+    defineProps<{
+        color?: string
+        opacity?: number
+        speed?: number
+    }>(),
+    {
+        color: '#FFFFFF',
+        opacity: 1.0,
+        speed: 1.0,
+    },
+)
+
+const tsm = {
+    uniforms: {
+        uTime: { value: 0.0 },
+        pointNum: { value: new THREE.Vector2(32, 16) },
+        uColor: { value: new THREE.Color(props.color) },
+        uOpacity: { value: props.opacity },
+    },
+    transparent: true,
+    vertexShader: `
+					varying vec2 vUv;
+                    void main(){
+						vUv=uv;
+						gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                    }`,
+    fragmentShader: `
+					float PI = acos(-1.0);
+                    uniform vec3 uColor;
+                    uniform vec2 pointNum;
+                    uniform float uTime;
+                    varying vec2 vUv;
+					uniform float uOpacity;
+                    void main(){
+						vec2 uv = vUv+ vec2(0.0, uTime);
+						float current = abs(sin(uv.y * PI));
+						if(current < sin(0.4714*PI)) {
+							current=current*0.5;
+						}
+						float d = distance(fract(uv * pointNum*2.0), vec2(0.5, 0.5));
+
+						if(d > current*0.2 ) {
+							discard;
+						} else {
+							gl_FragColor =vec4(uColor,current*uOpacity);
+						}
+                    }`,
+}
+
+watch(
+    () => [props.color, props.opacity],
+    ([color, opacity]) => {
+        tsm.uniforms.uColor.value = new THREE.Color(color)
+        // @ts-ignore
+        tsm.uniforms.uOpacity.value = opacity
+    },
+)
+
+const { onLoop } = useRenderLoop()
+onLoop(({ delta }) => {
+    tsm.uniforms.uTime.value += delta * 0.1 * props.speed
+})
+</script>

src/plugins/earthSample/config.js

@@ -1,23 +1,25 @@
 /*
- * @Description: 
+ * @Description:
  * @Version: 1.668
  * @Autor: 地虎降天龙
  * @Date: 2023-11-01 09:49:28
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-26 16:13:40
+ * @LastEditTime: 2024-07-01 11:00:14
  */
 export default {
-	"name": "earthSample",
-	"title": "地球的简单例子",
-	"intro": "基于threeJS简单地球的例子",
-	"version": "0.0.1",
-	"author": "地虎降天龙",
-	"website": "https://gitee.com/hawk86104",
-	"state": "active",
-	"require": [],
-	"preview": [
-		{ "src": "plugins/earthSample/preview/earthA.png", "type": "img", "name": "earthA", "title": "样式A" },
-		{ "src": "plugins/earthSample/preview/menuA.png", "type": "img", "name": "menuA", "title": "菜单A" },
-		{ "src": "plugins/earthSample/preview/lowpolyPlanet.png", "type": "img", "name": "lowpolyPlanet", "title": "低像素多边形" }
-	]
-}
+    name: 'earthSample',
+    title: '地球的简单例子',
+    intro: '基于threeJS简单地球的例子',
+    version: '0.0.1',
+    author: '地虎降天龙',
+    website: 'https://gitee.com/hawk86104',
+    state: 'active',
+    require: [],
+    preview: [
+        { src: 'plugins/earthSample/preview/earthA.png', type: 'img', name: 'earthA', title: '样式A' },
+        { src: 'plugins/earthSample/preview/menuA.png', type: 'img', name: 'menuA', title: '菜单A' },
+        { src: 'plugins/earthSample/preview/lowpolyPlanet.png', type: 'img', name: 'lowpolyPlanet', title: '低像素多边形' },
+        { src: 'plugins/earthSample/preview/pointsScan.png', type: 'img', name: 'pointsScan', title: '点扫描' },
+        { src: 'plugins/earthSample/preview/highlightScan.png', type: 'img', name: 'highlightScan', title: '高光扫描' },
+    ],
+}

src/plugins/earthSample/pages/highlightScan.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-01 09:14:28
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-01 11:08:34
+-->
+<template>
+    <TresCanvas clearColor="#201919" window-size>
+        <TresPerspectiveCamera :position="[3, 3, 0]" :fov="45" :near="0.1" :far="10000" />
+        <OrbitControls enableDamping />
+        <TresAmbientLight :intensity="3" />
+        <Suspense>
+            <earth />
+        </Suspense>
+        <Suspense>
+            <highlightScan v-bind="configState" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import earth from '../components/earth.vue'
+import highlightScan from '../components/highlightScan.vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+import { Pane } from 'tweakpane'
+
+const configState = reactive({
+    color: '#9affea',
+    opacity: 0.58,
+    speed: 4.8,
+    scale: 1.1,
+})
+const paneControl = new Pane()
+paneControl.addBinding(configState, 'color', { label: '颜色' })
+paneControl.addBinding(configState, 'opacity', { label: '透明度', min: 0, max: 1, step: 0.01 })
+paneControl.addBinding(configState, 'speed', { label: '速度', min: 0.1, max: 5, step: 0.1 })
+paneControl.addBinding(configState, 'scale', { label: '大小', min: 1.01, max: 2, step: 0.01 })
+</script>

src/plugins/earthSample/pages/pointsScan.vue

@@ -0,0 +1,42 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-07-01 09:14:28
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-01 11:08:16
+-->
+<template>
+    <TresCanvas clearColor="#201919" window-size>
+        <TresPerspectiveCamera :position="[3, 3, 0]" :fov="45" :near="0.1" :far="10000" />
+        <OrbitControls enableDamping />
+        <TresAmbientLight :intensity="3" />
+        <Suspense>
+            <earth />
+        </Suspense>
+        <Suspense>
+            <pointsScan v-bind="configState" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import earth from '../components/earth.vue'
+import pointsScan from '../components/pointsScan.vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+import { Pane } from 'tweakpane'
+
+const configState = reactive({
+    color: '#ffffff',
+    opacity: 0.48,
+    speed: 4.8,
+    scale: 1.1,
+})
+const paneControl = new Pane()
+paneControl.addBinding(configState, 'color', { label: '颜色' })
+paneControl.addBinding(configState, 'opacity', { label: '透明度', min: 0, max: 1, step: 0.01 })
+paneControl.addBinding(configState, 'speed', { label: '速度', min: 0.1, max: 5, step: 0.1 })
+paneControl.addBinding(configState, 'scale', { label: '大小', min: 1.01, max: 2, step: 0.01 })
+</script>