|
@@ -1,9 +1,10 @@
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, watchEffect } from 'vue'
|
|
|
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
|
|
|
-import { TresCanvas } from '@tresjs/core'
|
|
|
-import { OrbitControls } from '@tresjs/cientos'
|
|
|
-import TheSphere from './TheSphere.vue'
|
|
|
+import { extend } from '@tresjs/core';
|
|
|
+
|
|
|
+import { reactive } from 'vue';
|
|
|
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three';
|
|
|
+import { TresCanvas } from '@tresjs/core';
|
|
|
+import { OrbitControls } from '@tresjs/cientos';
|
|
|
|
|
|
const gl = {
|
|
|
clearColor: '#82DBC5',
|
|
@@ -12,75 +13,39 @@ const gl = {
|
|
|
shadowMapType: BasicShadowMap,
|
|
|
outputColorSpace: SRGBColorSpace,
|
|
|
toneMapping: NoToneMapping,
|
|
|
-}
|
|
|
-
|
|
|
-const wireframe = ref(true)
|
|
|
-
|
|
|
-const canvas = ref()
|
|
|
-
|
|
|
-watchEffect(() => {
|
|
|
- if (canvas.value) {
|
|
|
- console.log(canvas.value.context)
|
|
|
- }
|
|
|
-})
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <button @click="wireframe = !wireframe">
|
|
|
- Click
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <pre>{{ wireframe }}</pre>
|
|
|
- <TresCanvas
|
|
|
- v-bind="gl"
|
|
|
- ref="canvas"
|
|
|
- window-size
|
|
|
- class="awiwi"
|
|
|
- :style="{ background: '#008080' }"
|
|
|
- >
|
|
|
- <TresPerspectiveCamera
|
|
|
- :position="[7, 7, 7]"
|
|
|
- :look-at="[0, 4, 0]"
|
|
|
- />
|
|
|
+ <TresCanvas v-bind="gl">
|
|
|
+ <TresPerspectiveCamera :position="[9, 9, 9]" />
|
|
|
<OrbitControls />
|
|
|
- <TresFog
|
|
|
- :color="gl.clearColor"
|
|
|
- :near="5"
|
|
|
- :far="15"
|
|
|
- />
|
|
|
- <TresMesh
|
|
|
- :position="[-2, 6, 0]"
|
|
|
- :rotation="[0, Math.PI, 0]"
|
|
|
- cast-shadow
|
|
|
- >
|
|
|
- <TresConeGeometry :args="[1, 1.5, 3]" />
|
|
|
- <TresMeshToonMaterial color="#82DBC5" />
|
|
|
- </TresMesh>
|
|
|
- <TresMesh
|
|
|
- :position="[0, 4, 0]"
|
|
|
- cast-shadow
|
|
|
- >
|
|
|
- <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
|
|
|
- <TresMeshToonMaterial
|
|
|
- color="#4F4F4F"
|
|
|
- :wireframe="wireframe"
|
|
|
- />
|
|
|
- </TresMesh>
|
|
|
- <TresMesh
|
|
|
- :rotation="[-Math.PI / 2, 0, 0]"
|
|
|
- receive-shadow
|
|
|
+ <TresGroup
|
|
|
+ @pointer-move="console.log('Group pointer-move')"
|
|
|
+ @pointer-enter="console.log('Group pointer-enter')"
|
|
|
+ @pointer-leave="console.log('Group pointer-leave')"
|
|
|
+ @click="console.log('Group click')"
|
|
|
>
|
|
|
- <TresPlaneGeometry :args="[10, 10, 10, 10]" />
|
|
|
- <TresMeshToonMaterial color="#D3FC8A" />
|
|
|
- </TresMesh>
|
|
|
- <TheSphere />
|
|
|
- <TresAxesHelper :args="[1]" />
|
|
|
- <TresDirectionalLight
|
|
|
- :position="[0, 2, 4]"
|
|
|
- :intensity="2"
|
|
|
- cast-shadow
|
|
|
- />
|
|
|
- <TresOrthographicCamera />
|
|
|
+ <TresMesh
|
|
|
+ @pointer-move="console.log('child pointer-move')"
|
|
|
+ @pointer-enter="console.log('child pointer-enter')"
|
|
|
+ @pointer-leave="console.log('child pointer-leave')"
|
|
|
+ @click="console.log('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>
|
|
|
+ <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
|
|
|
+ <TresMeshToonMaterial color="#4F4F4F" />
|
|
|
+ </TresMesh>
|
|
|
+ <TresMesh :position="[2, -2, 0]">
|
|
|
+ <TresSphereGeometry />
|
|
|
+ <TresMeshToonMaterial color="#FBB03B" />
|
|
|
+ </TresMesh>
|
|
|
+ </TresGroup>
|
|
|
+ <TresDirectionalLight :position="[0, 2, 4]" :intensity="1.2" cast-shadow />
|
|
|
</TresCanvas>
|
|
|
</template>
|