[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-creature. three.js journey #16 - tamagotchi
flo-bit.dev/tiny-creature/
small fixes
+21
-20
+2
.gitignore
+2
.gitignore
+7
-2
src/app.html
+7
-2
src/app.html
···
1
1
<!doctype html>
2
-
<html lang="en">
2
+
<html lang="en" class="h-full">
3
3
<head>
4
4
<!-- Umami Analytics -->
5
5
<script
···
13
13
<meta name="viewport" content="width=device-width, initial-scale=1" />
14
14
%sveltekit.head%
15
15
16
+
<link
17
+
rel="icon"
18
+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐣</text></svg>"
19
+
/>
20
+
16
21
<title>tiny creature</title>
17
22
</head>
18
-
<body data-sveltekit-preload-data="hover" class="bg-stone-950">
23
+
<body data-sveltekit-preload-data="hover" class="h-full overflow-hidden bg-stone-950">
19
24
<div style="display: contents">%sveltekit.body%</div>
20
25
</body>
21
26
</html>
static/workshop.jpg
static/workshop.jpg
This is a binary file and will not be displayed.
+4
-12
src/lib/Creature.svelte
+4
-12
src/lib/Creature.svelte
···
7
7
import { createFaceTexture, createFurTexture, updateBackground, updateFace } from './face/face';
8
8
import { T, useTask, useThrelte } from '@threlte/core';
9
9
import {
10
-
add,
11
10
color,
12
11
float,
13
12
Fn,
14
-
hash,
15
13
mix,
16
-
mul,
17
14
mx_noise_float,
18
15
normalGeometry,
19
16
positionGeometry,
20
17
select,
21
18
texture,
22
-
transformedNormalView,
23
19
uniform,
24
-
vec2,
25
20
vec3,
26
21
vec4
27
22
} from 'three/tsl';
···
42
37
ySpeed = 5;
43
38
}
44
39
45
-
let primaryColors = [];
46
-
let secondaryColors = [];
40
+
let primaryColors: THREE.TSL.ShaderNodeObject<THREE.UniformNode<THREE.Color>>[] = [];
41
+
let secondaryColors: THREE.TSL.ShaderNodeObject<THREE.UniformNode<THREE.Color>>[] = [];
47
42
48
43
onMount(async () => {
49
44
// add mouse movement
···
103
98
104
99
let total = 12;
105
100
for (let i = 0; i < total; i++) {
106
-
const material = new THREE.MeshStandardNodeMaterial({
107
-
transparent: true,
108
-
opacity: 1
109
-
});
101
+
const material = new THREE.MeshStandardNodeMaterial();
110
102
111
103
// move vertices along normal to make each shell slightly bigger than the last
112
104
material.positionNode = positionGeometry
···
132
124
// const c = color(0xec4899);
133
125
134
126
// how much fur is there
127
+
// more transparent -> less fur (0 = no fur)
135
128
const a = t.a;
136
129
137
130
// if fur texture is black, use noise color
···
227
220
});
228
221
}
229
222
});
230
-
231
223
</script>
232
224
233
225
{#if creature}
+8
-6
src/lib/Scene.svelte
+8
-6
src/lib/Scene.svelte
···
2
2
import { T, useStage, useTask, useThrelte } from '@threlte/core';
3
3
import { Environment, OrbitControls } from '@threlte/extras';
4
4
import { onMount } from 'svelte';
5
-
import { ACESFilmicToneMapping } from 'three';
5
+
import { CineonToneMapping } from 'three';
6
6
import Stats from 'stats.js';
7
7
8
8
import Creature from './Creature.svelte';
9
9
10
-
const { renderer } = useThrelte();
10
+
const { renderer, scene } = useThrelte();
11
11
12
12
var stats = new Stats();
13
13
14
14
onMount(() => {
15
-
renderer.toneMapping = ACESFilmicToneMapping;
16
-
renderer.toneMappingExposure = 0.3;
15
+
renderer.toneMapping = CineonToneMapping;
16
+
scene.environmentIntensity = 0.2;
17
17
18
18
stats.showPanel(0);
19
19
document.body.appendChild(stats.dom);
···
43
43
44
44
<Creature />
45
45
46
-
<Environment isBackground={false} url={'/tiny-creature/workshop.hdr'} />
46
+
<Environment isBackground={false} url={'/tiny-creature/workshop.jpg'} />
47
47
48
-
<T.DirectionalLight position={[0, 10, 10]} intensity={1} />
48
+
<T.DirectionalLight position={[10, 10, 10]} intensity={1} />
49
+
50
+
<T.DirectionalLight position={[-10, 10, -10]} intensity={0.5} />