大小写敏感修复

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

@@ -0,0 +1,25 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-09 15:02:26
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-18 10:37:33
+-->
+
+<template>
+    <TresCanvas renderMode="manual" window-size>
+        <TresPerspectiveCamera :position="[10, 10, 10]" />
+        <TresAmbientLight :intensity="1" />
+        <!-- <TresDirectionalLight :position="[0, 10, 0]" :intensity="10" v-light-helper color="#ffffff" /> -->
+
+        <OrbitControls />
+        <TresGridHelper :args="[10, 10]" />
+        <MaskPass />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import MaskPass from '../../components/MaskPass.vue'
+</script>

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

@@ -0,0 +1,23 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-09 15:02:26
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-18 10:35:54
+-->
+
+<template>
+    <TresCanvas renderMode="manual" window-size>
+        <TresPerspectiveCamera :position="[10, 10, 10]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls />
+        <TresGridHelper :args="[10, 10]" />
+        <bloomPass />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import bloomPass from '../../components/bloomPass.vue'
+</script>

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

@@ -0,0 +1,33 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-09 15:02:26
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-18 10:37:54
+-->
+
+<template>
+    <TresCanvas renderMode="manual" window-size ref="tcRef">
+        <TresPerspectiveCamera :position="[10, 10, 10]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls />
+        <TresGridHelper :args="[10, 10]" />
+        <!-- 这种方式存在bug：无论相机在哪个角度，都看到正常方块绘制在发光方块之上 -->
+        <ecLayers />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import ecLayers from '../../components/ecLayers.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/basic/pages/shine/effectComposerMultiple.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-01-09 15:02:26
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-07-18 10:38:37
+-->
+
+<template>
+    <TresCanvas renderMode="manual" window-size ref="tcRef">
+        <TresPerspectiveCamera :position="[10, 10, 10]" />
+        <TresAmbientLight :intensity="1" />
+        <OrbitControls />
+        <TresGridHelper :args="[10, 10]" />
+        <ecLayerMultiple />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import ecLayerMultiple from '../../components/ecLayerMultiple.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/basic/pages/shine/effectComposerShaderPass.vue

@@ -0,0 +1,32 @@
+<!--
+ * @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/basic/pages/shine/fakeGlow.vue

@@ -0,0 +1,103 @@
+<template>
+	<TresCanvas window-size>
+		<TresPerspectiveCamera :position="[0, 25, 25]" :near="0.1" :fov="65" />
+		<TresAmbientLight :intensity="1.5" />
+		<TresDirectionalLight :position="[100, 100, 60]" :intensity="20" />
+		<OrbitControls autoRotate />
+		<TresGridHelper :args="[20, 10]" />
+
+		<TresGroup :position="[0, 6, 0]">
+			<TresMesh>
+				<TresTorusKnotGeometry :args="[4, 0.5, 128, 128]" />
+				<TresMeshPhysicalMaterial color="blue" :roughness="0.2" :clearcoat="1" />
+			</TresMesh>
+
+			<primitive :object="fakeGlowMesh" />
+		</TresGroup>
+		<Suspense>
+			<Environment :files="['pos-x.jpg', 'neg-x.jpg', 'pos-y.jpg', 'neg-y.jpg', 'pos-z.jpg', 'neg-z.jpg']"
+                path="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/6jpg/"/>
+		</Suspense>
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive, watchEffect } from 'vue'
+
+import { OrbitControls, Environment } from '@tresjs/cientos'
+import * as THREE from 'three'
+import { Pane } from 'tweakpane'
+import FakeGlowMaterial from '../../lib/FakeGlowMaterial'
+
+const paneControl = new Pane({
+	title: '辉光参数',
+	expanded: true
+})
+
+const fakeGlowState = reactive({
+	glowColor: '#a058c1',
+	falloff: 1.4,
+	glowInternalRadius: 3.7,
+	glowSharpness: 0.0,
+	opacity: 1.0,
+	side: THREE.FrontSide,
+	depthTest: false,
+})
+const fgMaterial = new FakeGlowMaterial()
+
+// opacity
+const fakeGlowMesh = new THREE.Mesh(
+	new THREE.TorusKnotGeometry(4, 3.8, 128, 128),
+	fgMaterial as any
+)
+paneControl.addBinding(fakeGlowState, 'glowColor', {
+	label: '颜色'
+})
+paneControl.addBinding(fakeGlowState, 'falloff', {
+	label: '衰减', min: 0,
+	max: 10,
+	step: 0.1,
+})
+paneControl.addBinding(fakeGlowState, 'glowInternalRadius', {
+	label: '内半径', min: -5,
+	max: 5,
+	step: 0.1,
+})
+paneControl.addBinding(fakeGlowState, 'glowSharpness', {
+	label: '清晰度', min: 0,
+	max: 10,
+	step: 0.1,
+})
+paneControl.addBinding(fakeGlowState, 'opacity', {
+	label: '透明', min: 0,
+	max: 1,
+	step: 0.1,
+})
+paneControl.addBinding(fakeGlowState, 'side', {
+	label: '材质面',
+	options: {
+		FrontSide: THREE.FrontSide,
+		BackSide: THREE.BackSide,
+		DoubleSide: THREE.DoubleSide,
+	},
+})
+// paneControl.addBlade({
+// 	view: 'list',
+// 	label: '材质面',
+// 	options: [
+// 		{ text: 'FrontSide', value: THREE.FrontSide },
+// 		{ text: 'BackSide', value: THREE.BackSide },
+// 		{ text: 'DoubleSide', value: THREE.DoubleSide },
+// 	],
+// 	value: THREE.FrontSide,
+// })
+
+watchEffect(() => {
+	fgMaterial.uniforms.falloff.value = fakeGlowState.falloff
+	fgMaterial.uniforms.glowColor.value = new THREE.Color(fakeGlowState.glowColor)
+	fgMaterial.uniforms.glowInternalRadius.value = fakeGlowState.glowInternalRadius
+	fgMaterial.uniforms.glowSharpness.value = fakeGlowState.glowSharpness
+	fgMaterial.uniforms.opacity.value = fakeGlowState.opacity
+	fgMaterial.side = fakeGlowState.side
+})
+</script>

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

@@ -0,0 +1,99 @@
+<!--
+ * @Description: 此方法的缺陷是 Mesh移动到摄像头偏远处 物体产生变形，而本身精灵不会。 解决方法 Mesh也换成 Sprite 后 用shader画圆可解决
+ * @Version: 1.668
+ * @Autor: Hawk
+ * @Date: 2023-10-12 11:41:10
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-29 16:11:35
+-->
+<template>
+	<TresCanvas v-bind="gl" window-size>
+		<TresPerspectiveCamera :position="[5, 5, 5]" />
+		<TresAmbientLight :intensity="1" />
+		<OrbitControls />
+		<TresGridHelper :args="[10, 10]" />
+
+		<TresMesh ref="TresMeshRefA" :position="[-2, 1, 0]">
+			<TresSphereGeometry :args="[1, 32, 16]" />
+			<TresMeshBasicMaterial :map="pTexture[0]" />
+		</TresMesh>
+		<shineShader :srcMesh="TresMeshRefA" v-bind="shineState" />
+
+		<Box ref="TreBoxRef" :args="[1, 1, 1]" :position="[2, 1, 0]">
+			<TresMeshBasicMaterial :map="pTexture[1]" />
+		</Box>
+		<shineShader :srcMesh="TreBoxRef && TreBoxRef.value" v-bind="shineState" />
+
+		<TresMesh ref="TresMeshRefB" :position="[0, 1, -2]">
+			<TresBoxGeometry :args="[1, 1, 1, 1, 1]" />
+			<TresMeshBasicMaterial color="#0ff" />
+		</TresMesh>
+		<shineShader :srcMesh="TresMeshRefB" v-bind="shineState" />
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { useTexture } from '@tresjs/core'
+import { OrbitControls, Box } from '@tresjs/cientos'
+import * as THREE from 'three'
+import { reactive, ref } from 'vue';
+import { Pane } from 'tweakpane';
+import shineShader from '../../components/shineShader.vue'
+const gl = {
+	clearColor: '#222',
+}
+const TresMeshRefA = ref()
+const TresMeshRefB = ref()
+const TreBoxRef = ref()
+// const { map: pTexture } = await useTexture({ map: './plugins/earthSample/image/earthA/earth.jpg' })
+const pTexture = await useTexture(
+	['./plugins/earthSample/image/earthA/earth.jpg', 'logo.png']
+)
+const shineState = reactive({
+	scale: 1.6,
+	color: '#00dfff',
+	subdivision: true,
+	c: 1.1,
+	p: 1.4,
+	side: THREE.FrontSide,
+	blending: THREE.AdditiveBlending
+})
+const paneControl = new Pane({
+	title: '参数',
+	expanded: true
+})
+paneControl.addBinding(shineState, 'color', {
+	label: '颜色'
+})
+paneControl.addBinding(shineState, 'scale', {
+	label: '大小', min: 1,
+	max: 3,
+	step: 0.2,
+})
+paneControl.addBinding(shineState, 'subdivision', {
+	label: '边缘处理'
+})
+paneControl.addBinding(shineState, 'c', {
+	label: 'c', min: 0,
+	max: 2,
+	step: 0.1,
+})
+paneControl.addBinding(shineState, 'p', {
+	label: 'p', min: 0,
+	max: 8,
+	step: 0.2,
+})
+paneControl.addBinding(shineState, 'side', {
+	options: {
+		FrontSide: THREE.FrontSide,
+		BackSide: THREE.BackSide,
+		DoubleSide: THREE.DoubleSide,
+	},
+})
+paneControl.addBinding(shineState, 'blending', {
+	options: {
+		AdditiveBlending: THREE.AdditiveBlending,
+		NormalBlending: THREE.NormalBlending
+	},
+})
+</script>

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

@@ -0,0 +1,59 @@
+<!--
+ * @Description: 此方法的缺陷是 Mesh移动到摄像头偏远处 物体产生变形，而本身精灵不会。 解决方法 Mesh也换成 Sprite 后 用shader画圆可解决
+ * @Version: 1.668
+ * @Autor: Hawk
+ * @Date: 2023-10-12 11:41:10
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-12-20 09:22:20
+-->
+<template>
+	<TresCanvas v-bind="gl" window-size>
+		<TresPerspectiveCamera :position="[3, 3, 3]" />
+		<TresAmbientLight :intensity="1" />
+		<OrbitControls />
+		<TresGridHelper :args="[10, 10]" />
+
+		<TresMesh :position="[0, 1, 0]" :scale="typeState.scale">
+			<TresSphereGeometry :args="[0.3, 32, 16]" />
+			<TresMeshLambertMaterial :color="typeState.color" />
+		</TresMesh>
+		<TresSprite :position="[0, 1, 0]" :scale="[typeState.scale, typeState.scale, 1.0]">
+			<SpriteMaterial :color="typeState.color" :blending="AdditiveBlending" :map="pTexture" />
+		</TresSprite>
+	</TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { useTexture } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { AdditiveBlending } from 'three'
+import { reactive } from 'vue';
+import { Pane } from 'tweakpane';
+const gl = {
+	clearColor: '#222',
+}
+const typeState = reactive({
+	color: "#ffff00",
+	scale: 1,
+})
+const { map: pTexture } = await useTexture({ map: './plugins/basic/shine/image/round.png' })
+
+const paneControl = new Pane({
+	title: '参数',
+	expanded: true
+});
+paneControl.addBinding(typeState, 'color', {
+	label: '颜色'
+})
+paneControl.addBinding(typeState, 'scale', {
+	label: '大小', min: 1,
+	max: 10,
+	step: 1,
+})
+paneControl.addBlade({
+	view: 'text',
+	label: '问题',
+	parse: (v) => String(v),
+	value: 'Mesh移动到摄像头偏远处 物体产生变形，而本身精灵不会。 解决方法 Mesh也换成 Sprite 后 用shader画圆可解决',
+});
+</script>

src/plugins/earthSample/pages/earthA.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-01 09:49:13
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-03-12 19:02:55
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
+
+import loading from 'PLS/UIdemo/components/loading/default.vue'
+
+import starts from '../components/earthA/starts.vue'
+import earthmap from '../components/earthA/earthmap.vue'
+import lightlinepoint from '../components/earthA/lightlinepoint.vue'
+import moon from '../components/earthA/moon.vue'
+
+const gl = {
+	clearColor: '#030311',
+	shadows: true,
+	alpha: false,
+	outputColorSpace: SRGBColorSpace,
+	shadowMapType: PCFSoftShadowMap,
+	useLegacyLights: true,
+}
+const yRotation = ref(0)
+useRenderLoop().onLoop(({ delta }) => {
+	yRotation.value += 0.02 * delta
+})
+</script>
+
+<template>
+	<loading />
+	<TresCanvas v-bind="gl" window-size>
+		<TresPerspectiveCamera :position="[0, 50, 300]" :fov="45" :near="0.1" :far="100000" />
+		<OrbitControls :autoRotate="true" :autoRotateSpeed="2" />
+		<starts />
+		<Suspense>
+			<earthmap />
+		</Suspense>
+		<Suspense>
+			<lightlinepoint />
+		</Suspense>
+		<Suspense>
+			<moon />
+		</Suspense>
+		<TresAmbientLight color="#484068" :intensity="1" />
+	</TresCanvas>
+</template>

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/lowpolyPlanet.vue

@@ -0,0 +1,47 @@
+<!--
+ * @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/earthSample/pages/menuA.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2023-11-02 09:30:20
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2023-11-06 11:59:07
+-->
+<template>
+	<div class="bg-img flex justify-center flex-items-center">
+		<starts></starts>
+		<div class="w-120 h-120 pos-relative">
+			<Suspense>
+				<circleo />
+			</Suspense>
+			<div class="css_globe_halo1"></div>
+			<Suspense>
+				<earth />
+			</Suspense>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import starts from '../components/menuA/starts.vue'
+import circleo from '../components/menuA/circle.vue'
+import earth from '../components/menuA/earth.vue'
+</script>
+
+<style lang="less" scoped>
+.bg-img {
+	height: 100%;
+	position: absolute;
+	background: url("@/../../plugins/earthSample/image/menuA/bg-img.png");
+	background-size: cover;
+	top: 0;
+	width: 100%;
+}
+
+.css_globe_halo1 {
+	position: absolute;
+	background: url("@/../../plugins/earthSample/image/menuA/css_globe_halo1.png");
+	background-size: cover;
+	filter: hue-rotate(1deg);
+	width: 100%;
+	height: 100%;
+	// margin-left: -10px;
+	// margin-top: 3px;
+}
+</style>

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>

src/plugins/earthSample/pages/smokeEarth.vue

@@ -0,0 +1,38 @@
+<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>
+            <smokeSphere v-bind="configState" />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import earth from '../components/earth.vue'
+import smokeSphere from '../components/smokeSphere.vue'
+
+import { OrbitControls } from '@tresjs/cientos'
+import { Pane } from 'tweakpane'
+
+const configState = reactive({
+    color: '#00d5ff',
+    opacity: 0.58,
+    speed: 1.8,
+    scale: 1.1,
+    phiLength: 2 * Math.PI,
+    thetaLength: Math.PI,
+})
+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 })
+paneControl.addBinding(configState, 'phiLength', { label: '水平范围', min: 0, max: 2 * Math.PI, step: 0.01 })
+paneControl.addBinding(configState, 'thetaLength', { label: '垂直范围', min: 0, max: Math.PI, step: 0.01 })
+</script>