Browse Source

feat(playground): forgot textures example

Alvaro 2 years ago
parent
commit
b68db17055
1 changed files with 23 additions and 12 deletions
  1. 23 12
      apps/playground/src/pages/vue/textures.mdx

+ 23 - 12
apps/playground/src/pages/vue/textures.mdx

@@ -21,8 +21,9 @@ Tutorial available [here](https://tresjs.org/examples/load-textures.html)
 <script setup lang="ts">
 import { Ref, ref } from 'vue'
 
-import { useTexture, useRenderLoop, TresInstance } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { useTexture, useRenderLoop } from '@tresjs/core'
+import { OrbitControls, Plane } from '@tresjs/cientos'
+import { TresInstance } from '@tresjs/core/dist/types'
 
 const pbrTexture = await useTexture({
   map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
@@ -34,16 +35,24 @@ const pbrTexture = await useTexture({
     'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
 })
 
-const sphereRef: Ref<TresInstance | null> = ref(null)
+const blackRock = await useTexture({
+  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg',
+  displacementMap:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',
+  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',
+  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',
+  ambientOcclusion:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',
+})
 
-const { resume, onLoop } = useRenderLoop()
+const sphereRef: Ref<TresInstance | null> = ref(null)
 
-resume()
+const { onLoop } = useRenderLoop()
 
 onLoop(({ delta }) => {
   // I will run at every frame ~ 60FPS (depending of your monitor)
   if (sphereRef.value) {
-    sphereRef.value.rotation.y = delta
+    sphereRef.value.rotation.y += delta
   }
 })
 </script>
@@ -56,16 +65,18 @@ onLoop(({ delta }) => {
     window-size
     power-preference="high-performance"
     preserve-drawing-buffer
-    physically-correct-lights
   >
     <OrbitControls />
-    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
     <TresScene>
-      <TresMesh ref="sphereRef" :scale="1" cast-shadow>
-        <TresSphereGeometry :args="[1, 100, 100]" />
-        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.2" />
+      <TresMesh ref="sphereRef" :position="[0, 4, 0]" :scale="1" cast-shadow>
+        <TresSphereGeometry :args="[1, 500, 500]" />
+        <TresMeshStandardMaterial v-bind="blackRock" displacement-scale="0.2" />
       </TresMesh>
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+      <Plane :args="[10, 10, 500, 500]">
+        <TresMeshStandardMaterial v-bind="pbrTexture" displacement-scale="0.6" />
+      </Plane>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
     </TresScene>
   </TresCanvas>
 </template>