brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improves new 3D model

Browse Source
This commit is contained in:
Christian Beutel
2024-11-16 13:24:09 +01:00
parent b13686529c
commit 2e8d7f5e82
2 changed files with 60 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
web/src/lib/components/mountain.svelte
View File

@@ -4,16 +4,18 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
--> -->
<script lang="ts"> <script lang="ts">
import { Group } from "three"; import { theme } from "$lib/stores/theme_store";
import { T, forwardEventHandlers } from "@threlte/core"; import { T, forwardEventHandlers } from "@threlte/core";
import { useGltf } from "@threlte/extras"; import { useGltf } from "@threlte/extras";
import { tweened } from "svelte/motion";
import { theme } from "$lib/stores/theme_store";
import { backInOut } from "svelte/easing"; import { backInOut } from "svelte/easing";
import { tweened } from "svelte/motion";
import { Group, Mesh, SpotLight } from "three";
export const ref = new Group(); export const ref = new Group();
export let rotation: number = 0; export let rotation: number = 0;
let bridge: Mesh;
const gltf = useGltf("/models/mountain.glb"); const gltf = useGltf("/models/mountain.glb");
const component = forwardEventHandlers(); const component = forwardEventHandlers();
@@ -30,25 +32,25 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
}); });
$: moonZPosition.set($theme == "dark" ? 14 : -20); $: moonZPosition.set($theme == "dark" ? 14 : -20);
const campfireLightIntensitiy = tweened($theme == "dark" ? 2 : 0, { const campfireLightIntensity = tweened($theme == "dark" ? 2 : 0, {
duration: 500, duration: 500,
}); });
$: campfireLightIntensitiy.set($theme == "dark" ? 2 : 0); $: campfireLightIntensity.set($theme == "dark" ? 2 : 0);
const cabinLightIntensitiy = tweened($theme == "dark" ? 4 : 0, { const cabinLightIntensity = tweened($theme == "dark" ? 4 : 0, {
duration: 400, duration: 400,
}); });
$: cabinLightIntensitiy.set($theme == "dark" ? 4 : 0); $: cabinLightIntensity.set($theme == "dark" ? 4 : 0);
const sunLightIntensitiy = tweened($theme == "light" ? 2 : 0, { const sunLightIntensity = tweened($theme == "light" ? 4 : 0, {
duration: 500, duration: 500,
}); });
$: sunLightIntensitiy.set($theme == "light" ? 2 : 0); $: sunLightIntensity.set($theme == "light" ? 4 : 0);
const moonLightIntensitiy = tweened($theme == "dark" ? 0.8 : 0, { const moonLightIntensity = tweened($theme == "dark" ? 0.8 : 0, {
duration: 500, duration: 500,
}); });
$: moonLightIntensitiy.set($theme == "dark" ? 0.8 : 0); $: moonLightIntensity.set($theme == "dark" ? 0.8 : 0);
</script> </script>
<T is={ref} dispose={false} {...$$restProps} bind:this={$component}> <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
@@ -77,7 +79,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
<T.Group <T.Group
position={[0.2, 1.3, 13.73]} position={[0.2, 1.3, 13.73]}
rotation={[Math.PI, -1.43, Math.PI]} rotation={[Math.PI, -1.43, Math.PI]}
scale={78.24} scale={90.24}
> >
<T.Mesh <T.Mesh
geometry={gltf.nodes.Sign6001_1.geometry} geometry={gltf.nodes.Sign6001_1.geometry}
@@ -109,7 +111,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
<T.PointLight <T.PointLight
position={[14.37, 3.8, 4.11]} position={[14.37, 3.8, 4.11]}
color="#C98A76" color="#C98A76"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight> ></T.PointLight>
<T.Mesh <T.Mesh
geometry={gltf.nodes.campfire.geometry} geometry={gltf.nodes.campfire.geometry}
@@ -123,12 +125,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
position={[13.84, 2.64, 8.83]} position={[13.84, 2.64, 8.83]}
scale={0.42} scale={0.42}
/> />
<T.DirectionalLight
position={[-10, 20, -10]}
color="#a2cbf5"
intensity={$moonLightIntensitiy}
castShadow
></T.DirectionalLight>
<T.Mesh <T.Mesh
geometry={gltf.nodes.Moon.geometry} geometry={gltf.nodes.Moon.geometry}
material={gltf.materials.DD9944} material={gltf.materials.DD9944}
@@ -136,14 +133,14 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
rotation={[0, -0.81, 0]} rotation={[0, -0.81, 0]}
scale={0.53} scale={0.53}
><T.PointLight position={[0.5, 5, 0.5]} color="#a2cbf5" intensity={4} ><T.PointLight position={[0.5, 5, 0.5]} color="#a2cbf5" intensity={4}
></T.PointLight></T.Mesh ></T.PointLight>
<T.DirectionalLight
position={[20, 20, 40]}
color="#a2cbf5"
intensity={$moonLightIntensity}
castShadow
></T.DirectionalLight></T.Mesh
> >
<T.DirectionalLight
position={[-10, 20, -10]}
color="#ffffff"
intensity={$sunLightIntensitiy}
castShadow
></T.DirectionalLight>
<T.Group <T.Group
position={[-5.61, $sunZPosition, -26.34]} position={[-5.61, $sunZPosition, -26.34]}
rotation={[0, 0.75, 0]} rotation={[0, 0.75, 0]}
@@ -157,10 +154,36 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
geometry={gltf.nodes.GeoSphere003_1_1.geometry} geometry={gltf.nodes.GeoSphere003_1_1.geometry}
material={gltf.materials._Sol01___Default} material={gltf.materials._Sol01___Default}
> >
<T.PointLight position={[0, 45, 60]} color="#ffffff" intensity={20} <T.PointLight position={[0, 20, 45]} color="#ffffff" intensity={20}
></T.PointLight></T.Mesh ></T.PointLight>
<T.PointLight position={[-50, 40, 40]} color="#ffffff" intensity={20}
></T.PointLight>
<T.PointLight position={[0, 60, 50]} color="#ffffff" intensity={20}
></T.PointLight>
<T.PointLight position={[50, 40, 40]} color="#ffffff" intensity={20}
></T.PointLight>
<T.DirectionalLight
position={[20, 40, 20]}
color="#FCF9D9"
intensity={$sunLightIntensity}
castShadow
/></T.Mesh
> >
</T.Group> </T.Group>
<T.SpotLight
position={[-4.58, 4.85, 13.62]}
angle={Math.PI / 5}
color="#ffffff"
intensity={$campfireLightIntensity * 1.5}
target={bridge}
></T.SpotLight>
<T.Mesh
geometry={gltf.nodes.Hiker.geometry}
material={gltf.materials["Material.004"]}
position={[-4.58, 4.6, 13.62]}
rotation={[-1.53, -0.02, 2.52]}
scale={52.08}
/>
<T.Mesh <T.Mesh
geometry={gltf.nodes.ground.geometry} geometry={gltf.nodes.ground.geometry}
material={gltf.materials["Color texture"]} material={gltf.materials["Color texture"]}
@@ -169,6 +192,7 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
geometry={gltf.nodes.bridge.geometry} geometry={gltf.nodes.bridge.geometry}
material={gltf.materials["Color texture"]} material={gltf.materials["Color texture"]}
position={[0.06, 5.76, 6.04]} position={[0.06, 5.76, 6.04]}
bind:ref={bridge}
/> />
<T.Mesh <T.Mesh
geometry={gltf.nodes.water.geometry} geometry={gltf.nodes.water.geometry}
@@ -712,8 +736,8 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
/> />
<T.PointLight <T.PointLight
position={[-8.6, 9.3, -1]} position={[-8.6, 9.3, -1]}
color="#FCF9D9 " color="#FCF9D9"
intensity={$cabinLightIntensitiy} intensity={$cabinLightIntensity}
></T.PointLight> ></T.PointLight>
<T.Mesh <T.Mesh
geometry={gltf.nodes.Cabin.geometry} geometry={gltf.nodes.Cabin.geometry}
@@ -748,12 +772,12 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
<T.PointLight <T.PointLight
position={[-1, 0.8, 0]} position={[-1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight> ></T.PointLight>
<T.PointLight <T.PointLight
position={[1, 0.8, 0]} position={[1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight></T.Mesh ></T.PointLight></T.Mesh
> >
</T.Group> </T.Group>
@@ -772,12 +796,12 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
<T.PointLight <T.PointLight
position={[-1, 0.8, 0]} position={[-1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight> ></T.PointLight>
<T.PointLight <T.PointLight
position={[1, 0.8, 0]} position={[1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight></T.Mesh ></T.PointLight></T.Mesh
> >
</T.Group> </T.Group>
@@ -793,12 +817,12 @@ Command: npx @threlte/gltf@2.0.1 static/models/mountain.glb
<T.PointLight <T.PointLight
position={[-1, 0.8, 0]} position={[-1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight> ></T.PointLight>
<T.PointLight <T.PointLight
position={[1, 0.8, 0]} position={[1, 0.8, 0]}
color="#ffffff" color="#ffffff"
intensity={$campfireLightIntensitiy} intensity={$campfireLightIntensity}
></T.PointLight></T.Mesh ></T.PointLight></T.Mesh
> >
</T.Group> </T.Group>

BIN
web/static/models/mountain.glb
View File

Binary file not shown.