Merge branch 'main' into feature/smoke-demo

damienmontastier · Jun 5, 2023 · 6ab38aa · 6ab38aa
2 parents c84f7b2 + 959375f
commit 6ab38aa
Show file tree

Hide file tree

Showing 16 changed files with 1,293 additions and 605 deletions.
diff --git a/components/content/haunted-house/floor.vue b/components/content/haunted-house/floor.vue
@@ -0,0 +1,98 @@
+<script setup>
+import { shallowRef } from 'vue'
+import { useTexture } from '@tresjs/core'
+import { Float32BufferAttribute, RepeatWrapping, BoxGeometry, MeshStandardMaterial, Mesh } from 'three'
+
+const floorRef = shallowRef()
+const gravesRef = shallowRef()
+const floorTexture = await useTexture({
+  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/color.jpg',
+  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/normal.jpg',
+  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/roughness.jpg',
+  aoMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/grass/ambientOcclusion.jpg',
+})
+
+for (const key in floorTexture) {
+  if (floorTexture[key]) {
+    floorTexture[key].repeat.set(8, 8)
+    floorTexture[key].wrapS = RepeatWrapping
+    floorTexture[key].wrapT = RepeatWrapping
+  }
+}
+
+const floorOptions = {
+  color: '#82DBC5',
+  roughness: 0.5,
+  metalness: 0.5,
+  map: floorTexture.map,
+  normalMap: floorTexture.normalMap,
+  roughnessMap: floorTexture.roughnessMap,
+  aoMap: floorTexture.aoMap,
+}
+watch(floorRef, value => {
+  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
+})
+
+const bushes = [
+  {
+    scale: [0.5, 0.5, 0.5],
+    position: [0.8, 0.2, 2.2],
+  },
+  {
+    scale: [0.25, 0.25, 0.25],
+    position: [1.4, 0.1, 2.1],
+  },
+  {
+    scale: [0.4, 0.4, 0.4],
+    position: [-0.8, 0.1, 2.2],
+  },
+  {
+    scale: [0.15, 0.15, 0.15],
+    position: [-1, 0.05, 2.6],
+  },
+]
+
+const graveGeometry = new BoxGeometry(0.6, 0.8, 0.1)
+const graveMaterial = new MeshStandardMaterial({ color: '#727272' })
+const graves = []
+
+for (let i = 0; i < 50; i++) {
+  const angle = Math.random() * Math.PI * 2 // Random angle
+  const radius = 3 + Math.random() * 6 // Random radius
+  const x = Math.cos(angle) * radius // Get the x position using cosinus
+  const z = Math.sin(angle) * radius // Get the z position using sinus
+
+  // Create the mesh
+  const grave = new Mesh(graveGeometry, graveMaterial)
+  grave.castShadow = true
+  // Position
+  grave.position.set(x, 0.3, z)
+
+  // Rotation
+  grave.rotation.z = (Math.random() - 0.5) * 0.4
+  grave.rotation.y = (Math.random() - 0.5) * 0.4
+  graves.push(grave)
+}
+</script>
+<template>
+  <TresMesh ref="floorRef" receive-shadow :rotation="[-Math.PI * 0.5, 0, 0]" :position="[0, 0, 0]">
+    <TresPlaneGeometry :args="[20, 20]" />
+    <TresMeshStandardMaterial v-bind="floorOptions" />
+  </TresMesh>
+  <TresMesh v-for="({ position, scale }, index) in bushes" :key="index" :position="position" :scale="scale">
+    <TresSphereGeometry :args="[1, 16, 16]" />
+    <TresMeshStandardMaterial color="#89c854" />
+  </TresMesh>
+  <TresGroup ref="gravesRef">
+    <TresMesh
+      v-for="({ position, scale, rotation }, index) in graves"
+      :key="index"
+      :position="position"
+      :scale="scale"
+      :rotation="rotation"
+      :material="graveMaterial"
+      :geometry="graveGeometry"
+    >
+    </TresMesh>
+  </TresGroup>
+</template>
diff --git a/components/content/haunted-house/ghosts.vue b/components/content/haunted-house/ghosts.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { shallowRef } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+
+const ghost1 = shallowRef(null)
+const ghost2 = shallowRef(null)
+const ghost3 = shallowRef(null)
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+  const ghost1Angle = elapsed * 0.5
+  const ghost2Angle = -elapsed * 0.32
+  const ghost3Angle = -elapsed * 0.18
+  if (ghost1.value && ghost2.value && ghost3.value) {
+    ghost1.value.position.x = Math.cos(ghost1Angle) * 4
+    ghost1.value.position.z = Math.sin(ghost1Angle) * 4
+    ghost1.value.position.y = Math.sin(elapsed * 3)
+
+    ghost2.value.position.x = Math.cos(ghost2Angle) * 5
+    ghost2.value.position.z = Math.sin(ghost2Angle) * 5
+    ghost2.value.position.y = Math.sin(elapsed * 4) + Math.sin(elapsed * 2.5)
+
+    ghost3.value.position.x = Math.cos(ghost3Angle) * (7 + Math.sin(elapsed * 0.32))
+    ghost3.value.position.z = Math.sin(ghost3Angle) * (7 + Math.sin(elapsed * 0.5))
+    ghost3.value.position.y = Math.sin(elapsed * 4) + Math.sin(elapsed * 2.5)
+  }
+})
+</script>
+<template>
+  <TresPointLight :args="['#ff00ff', 3, 3]" ref="ghost1" cast-shadow />
+  <TresPointLight :args="['#00ffff', 3, 3]" ref="ghost2" cast-shadow />
+  <TresPointLight :args="['#ff7800', 3, 3]" ref="ghost3" cast-shadow />
+</template>
diff --git a/components/content/haunted-house/house.vue b/components/content/haunted-house/house.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { shallowRef, watch } from 'vue'
+import { useTexture } from '@tresjs/core'
+import { Float32BufferAttribute } from 'three'
+
+const wallRef = shallowRef()
+const doorRef = shallowRef()
+
+const brickTextures = await useTexture({
+  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/color.jpg',
+  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/normal.jpg',
+  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/roughness.jpg',
+  ambientOcclusion:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/bricks/ambientOcclusion.jpg',
+})
+
+const doorTextures = await useTexture({
+  map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/color.jpg',
+  alphaMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/alpha.jpg',
+  ambientOcclusion:
+    'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/ambientOcclusion.jpg',
+  displacementMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/height.jpg',
+  normalMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/normal.jpg',
+  metalnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/metalness.jpg',
+  roughnessMap: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/haunted-house/door/roughness.jpg',
+})
+
+const wallOptions = {
+  map: brickTextures.map,
+  aoMap: brickTextures.aoMap,
+  normalMap: brickTextures.normalMap,
+  roughnessMap: brickTextures.roughnessMap,
+}
+const doorOptions = {
+  transparent: true,
+  displacementScale: 0.1,
+  map: doorTextures.map,
+  alphaMap: doorTextures.alphaMap,
+  aoMap: doorTextures.aoMap,
+  displacementMap: doorTextures.displacementMap,
+  normalMap: doorTextures.normalMap,
+  metalnessMap: doorTextures.metalnessMap,
+  roughnessMap: doorTextures.roughnessMap,
+}
+watch(wallRef, value => {
+  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
+})
+
+watch(doorRef, value => {
+  value.geometry.setAttribute('uv2', new Float32BufferAttribute(value.geometry.attributes.uv.array, 2))
+})
+</script>
+<template>
+  <TresGroup ref="houseRef">
+    <TresMesh ref="doorRef" :position="[0, 0.9, 2.01]">
+      <TresPlaneGeometry :args="[2, 2, 100, 100]" />
+      <TresMeshStandardMaterial v-bind="doorOptions" />
+    </TresMesh>
+    <TresMesh ref="roofRef" :position="[0, 3, 0]" :rotation="[0, Math.PI * 0.25, 0]">
+      <TresConeGeometry :args="[3.5, 1, 4]" />
+      <TresMeshStandardMaterial color="#b35f45" />
+    </TresMesh>
+    <TresMesh ref="wallRef" :position="[0, 1.25, 0]" cast-shadow>
+      <TresBoxGeometry :args="[4, 2.5, 4]" />
+      <TresMeshStandardMaterial v-bind="wallOptions" />
+    </TresMesh>
+    <TresPointLight
+      :position="[0, 2.2, 2.7]"
+      :args="['#ff7d46', 1, 7]"
+      :shadow-mapSize-width="256"
+      :shadow-mapSize-height="256"
+      :shadow-camera-far="7"
+      cast-shadow
+    />
+  </TresGroup>
+</template>
diff --git a/components/content/haunted-house/index.vue b/components/content/haunted-house/index.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
+import Floor from './floor.vue'
+import House from './house.vue'
+import Ghosts from './ghosts.vue'
+
+const { pane } = useTweakPane()
+
+const gl = {
+  clearColor: '#262837',
+  shadows: true,
+  alpha: false,
+  shadowMapType: PCFSoftShadowMap,
+  outputColorSpace: SRGBColorSpace,
+}
+
+const moonOptions = reactive({
+  intensity: 1.12,
+  position: [4, 5, -2],
+  color: '#b9d5ff',
+})
+
+pane.addInput(moonOptions, 'intensity', {
+  label: 'intensity',
+  min: 0,
+  max: 3,
+  step: 0.001,
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[4, 2, 5]" />
+    <TresFog :args="['#262837', 1, 15]" />
+    <OrbitControls />
+
+    <Suspense>
+      <House />
+    </Suspense>
+    <Suspense>
+      <Floor />
+    </Suspense>
+    <Ghosts />
+    <TresAmbientLight color="#b9d5ff" :intensity="0.3" />
+    <TresDirectionalLight
+      v-bind="moonOptions"
+      :shadow-mapSize-width="256"
+      :shadow-mapSize-height="256"
+      :shadow-camera-far="15"
+      cast-shadow
+    />
+  </TresCanvas>
+</template>
diff --git a/...onents/content/pam-camera-mouse/index.vue → ...nts/content/pam-camera-controls/index.vue b/...onents/content/pam-camera-mouse/index.vue → ...nts/content/pam-camera-controls/index.vue
@@ -2,13 +2,13 @@
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 
-import { MouseParallax } from '@tresjs/cientos'
+import { MouseParallax, Stars } from '@tresjs/cientos'
 
 import Vertex from './shaders/vertex.glsl'
 import Fragment from './shaders/fragment.glsl'
 
 const gl = {
-  clearColor: '#202020',
+  clearColor: '#111',
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
@@ -40,6 +40,7 @@ onLoop(() => {
       <TresSphereGeometry :args="[1, 30, 30]" />
       <TresShaderMaterial v-bind="shader" />
     </TresMesh>
+    <Stars />
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
diff --git a/...nt/pam-camera-mouse/shaders/fragment.glsl → ...pam-camera-controls/shaders/fragment.glsl b/...nt/pam-camera-mouse/shaders/fragment.glsl → ...pam-camera-controls/shaders/fragment.glsl
@@ -1,6 +1,8 @@
 precision mediump float;
 varying vec2 vUv;
 varying vec3 vPosition;
+varying vec3 vNormal;
+varying vec3 vRotateLayer;
 uniform highp float uTime;
 
 
@@ -109,11 +111,22 @@ for(int i=0;i<6; i++){
     scale *= 2.;
 }
 return sum;
-
 }
+
+  vec3 SunColor(float b){
+    b*= 0.25;
+    return (vec3(b, b*b, b*b*b*b)/0.25)*0.6;
+  }
 
 void main(){
-    vec4 p = vec4(vPosition * 3., uTime * 0.1);
-    float noisy = layer(p);
-    gl_FragColor = vec4(noisy, noisy, noisy,1.);
+        vec3 viewDirection = normalize(cameraPosition - vPosition);
+        float fresnel =  dot(viewDirection, vNormal);
+        vec4 p = vec4(vPosition * 3., uTime * 0.1);
+        float noisy = layer(p);
+        float colx = noisy * SunColor(noisy).r * 4. +0.9;
+        float coly = noisy * SunColor(noisy).g * 4. +0.9;
+
+        gl_FragColor = vec4(vec3(colx, coly, noisy),1.);
+        gl_FragColor += vRotateLayer.r *0.25;
+        gl_FragColor *= vec4(vec3(fresnel),1.);
 }
diff --git a/components/content/pam-camera-controls/shaders/vertex.glsl b/components/content/pam-camera-controls/shaders/vertex.glsl
@@ -0,0 +1,22 @@
+varying vec2 vUv;
+varying vec3 vPosition;
+varying vec3 vNormal;
+varying vec3 vRotateLayer;
+uniform float uTime;
+
+mat2 rotate(float a) {
+    float s = sin(a);
+    float c = cos(a);
+    return mat2(c, -s, s, c);
+}
+
+void main(){
+gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vUv = uv;
+    vPosition = position;
+    mat2 rot = rotate(uTime);
+    vec3 newPos = position;
+    newPos.xz = rot*newPos.xz;
+    vRotateLayer = newPos;
+    vNormal = normal;
+}
diff --git a/components/content/pam-camera-mouse/shaders/vertex.glsl b/components/content/pam-camera-mouse/shaders/vertex.glsl