|
@@ -1,5 +1,5 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
|
|
|
|
|
|
+import { BasicShadowMap, MeshToonMaterial, NoToneMapping, SRGBColorSpace } from 'three'
|
|
import { reactive, ref } from 'vue'
|
|
import { reactive, ref } from 'vue'
|
|
import { TresCanvas, useRenderLoop } from '@tresjs/core'
|
|
import { TresCanvas, useRenderLoop } from '@tresjs/core'
|
|
import { OrbitControls } from '@tresjs/cientos'
|
|
import { OrbitControls } from '@tresjs/cientos'
|
|
@@ -38,6 +38,10 @@ function onPointerOut(ev) {
|
|
}
|
|
}
|
|
|
|
|
|
const sphereExists = ref(true)
|
|
const sphereExists = ref(true)
|
|
|
|
+
|
|
|
|
+const toonTealMaterial = new MeshToonMaterial({
|
|
|
|
+ color: 'teal',
|
|
|
|
+})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
@@ -48,6 +52,7 @@ const sphereExists = ref(true)
|
|
<TresCanvas
|
|
<TresCanvas
|
|
ref="canvasRef"
|
|
ref="canvasRef"
|
|
v-bind="state"
|
|
v-bind="state"
|
|
|
|
+ @render="onRender"
|
|
>
|
|
>
|
|
<TresPerspectiveCamera
|
|
<TresPerspectiveCamera
|
|
:position="[11, 11, 11]"
|
|
:position="[11, 11, 11]"
|
|
@@ -66,14 +71,26 @@ const sphereExists = ref(true)
|
|
:user-data="{ debug: true }"
|
|
:user-data="{ debug: true }"
|
|
:position="[0, 4, 0]"
|
|
:position="[0, 4, 0]"
|
|
cast-shadow
|
|
cast-shadow
|
|
|
|
+ :material="toonTealMaterial"
|
|
@pointer-enter="onPointerEnter"
|
|
@pointer-enter="onPointerEnter"
|
|
@pointer-out="onPointerOut"
|
|
@pointer-out="onPointerOut"
|
|
>
|
|
>
|
|
<TresSphereGeometry :args="[2, 32, 32]" />
|
|
<TresSphereGeometry :args="[2, 32, 32]" />
|
|
- <TresMeshBasicMaterial color="teal" />
|
|
|
|
|
|
+ <TresMeshStandardMaterial attach="attachedMaterial" />
|
|
</TresMesh>
|
|
</TresMesh>
|
|
</TresGroup>
|
|
</TresGroup>
|
|
|
|
|
|
|
|
+ <TresMesh
|
|
|
|
+ ref="sphereRef"
|
|
|
|
+ :position="[-4, 4, 0]"
|
|
|
|
+ cast-shadow
|
|
|
|
+ :material="toonTealMaterial"
|
|
|
|
+ @pointer-enter="onPointerEnter"
|
|
|
|
+ @pointer-out="onPointerOut"
|
|
|
|
+ >
|
|
|
|
+ <TresSphereGeometry :args="[2, 32, 32]" />
|
|
|
|
+ </TresMesh>
|
|
|
|
+
|
|
<TresDirectionalLight
|
|
<TresDirectionalLight
|
|
:position="[0, 8, 4]"
|
|
:position="[0, 8, 4]"
|
|
:intensity="0.7"
|
|
:intensity="0.7"
|