Garrett Walker 1 年之前
父節點
當前提交
3209b576a5
共有 1 個文件被更改,包括 32 次插入17 次删除
  1. 32 17
      playground/src/components/TheExperience.vue

+ 32 - 17
playground/src/components/TheExperience.vue

@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { extend } from "@tresjs/core";
+import { extend, TresCanvas } from '@tresjs/core'
 
-import { reactive } from "vue";
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from "three";
-import { TresCanvas } from "@tresjs/core";
-import { OrbitControls } from "@tresjs/cientos";
+import { reactive } from 'vue'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
 
 const gl = {
-  clearColor: "#82DBC5",
+  clearColor: '#82DBC5',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
-};
+}
 
 // const noop = () => {}
-const noop = console.log;
+const noop = console.log
 </script>
 
 <template>
@@ -30,20 +29,26 @@ const noop = console.log;
       @click="noop('Group click')"
     >
       <TresMesh
+        :position="[-2, 2, 0]"
+        :rotation="[0, Math.PI, 0]"
         @pointer-move="noop('child pointer-move')"
         @pointer-enter="noop('child pointer-enter')"
         @pointer-leave="noop('child pointer-leave')"
         @click="noop('child click')"
-        :position="[-2, 2, 0]"
-        :rotation="[0, Math.PI, 0]"
       >
         <TresConeGeometry :args="[1, 1.5, 3]" />
         <TresMeshToonMaterial color="#82DBC5" />
       </TresMesh>
-      <TresMesh :position="[0, 0, 0]" cast-shadow>
+      <TresMesh
+        :position="[0, 0, 0]"
+        cast-shadow
+      >
         <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
         <TresMeshToonMaterial color="#4F4F4F" />
-        <TresMesh :position="[5, 2, -5]" cast-shadow>
+        <TresMesh
+          :position="[5, 2, -5]"
+          cast-shadow
+        >
           <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
           <TresMeshToonMaterial color="#d3d3d3" />
         </TresMesh>
@@ -59,20 +64,26 @@ const noop = console.log;
           @click="noop('2nd Group click')"
         >
           <TresMesh
+            :position="[-2, 2, 0]"
+            :rotation="[0, Math.PI, 0]"
             @pointer-move="noop('2nd group child pointer-move')"
             @pointer-enter="noop('2nd group child pointer-enter')"
             @pointer-leave="noop('2nd group child pointer-leave')"
             @click="noop('2nd group child click')"
-            :position="[-2, 2, 0]"
-            :rotation="[0, Math.PI, 0]"
           >
             <TresConeGeometry :args="[1, 1.5, 3]" />
             <TresMeshToonMaterial color="#82DBC5" />
           </TresMesh>
-          <TresMesh :position="[0, 0, 0]" cast-shadow>
+          <TresMesh
+            :position="[0, 0, 0]"
+            cast-shadow
+          >
             <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
             <TresMeshToonMaterial color="#4F4F4F" />
-            <TresMesh :position="[5, 2, -5]" cast-shadow>
+            <TresMesh
+              :position="[5, 2, -5]"
+              cast-shadow
+            >
               <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
               <TresMeshToonMaterial color="#d3d3d3" />
             </TresMesh>
@@ -84,6 +95,10 @@ const noop = console.log;
         </TresGroup>
       </TresMesh>
     </TresGroup>
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="1.2" cast-shadow />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="1.2"
+      cast-shadow
+    />
   </TresCanvas>
 </template>