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