mirror of
https://github.com/BradNut/svelte-3d
synced 2025-09-08 17:40:17 +00:00
feat: 🔥 Adding 3D star GLTF file and messing with lighting and color
This commit is contained in:
Bradley Shellnut
parent
c484607caa
commit
3dbb35264e
3 changed files with 191 additions and 34 deletions
50
src/routes/contributions.svelte
Normal file
50
src/routes/contributions.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
<script>
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import * as SC from 'svelte-cubed';
|
||||||
|
import { spring } from 'svelte/motion';
|
||||||
|
|
||||||
|
let rows = 5;
|
||||||
|
let depth = 10;
|
||||||
|
let hue = Math.round(Math.random() * 360);
|
||||||
|
|
||||||
|
let contributions = spring(getContributions());
|
||||||
|
|
||||||
|
function refresh() {
|
||||||
|
$contributions = getContributions();
|
||||||
|
hue = Math.round(Math.random() * 360);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getContributions() {
|
||||||
|
return new Array(rows * depth).fill(0).map((value) => {
|
||||||
|
return Math.round(Math.random() * 10);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button on:click={refresh}>Refresh</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SC.Canvas antialias alpha>
|
||||||
|
{#each $contributions as contribution, index}
|
||||||
|
<SC.Mesh
|
||||||
|
scale={[1, contribution, 1]}
|
||||||
|
geometry={new THREE.BoxGeometry()}
|
||||||
|
material={new THREE.MeshStandardMaterial({
|
||||||
|
color: `hsl(${hue}, 50%, ${contribution * 10}%)`,
|
||||||
|
})}
|
||||||
|
position={[Math.floor(index / rows), contribution / 2, index % rows]}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
<SC.PerspectiveCamera position={[15, 15, 15]} />
|
||||||
|
<SC.OrbitControls />
|
||||||
|
<SC.AmbientLight intensity={0.5} />
|
||||||
|
<SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
|
||||||
|
</SC.Canvas>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.controls {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,45 +1,29 @@
|
||||||
<script>
|
<script>
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
import * as SC from 'svelte-cubed';
|
import * as SC from 'svelte-cubed';
|
||||||
import { spring } from 'svelte/motion';
|
let star;
|
||||||
|
let loader = new GLTFLoader();
|
||||||
|
|
||||||
let rows = 5;
|
loader.load('star.gltf', (gltf) => {
|
||||||
let depth = 10;
|
star = gltf.scene.children[0].geometry;
|
||||||
let hue = Math.round(Math.random() * 360);
|
});
|
||||||
|
|
||||||
let contributions = spring(getContributions());
|
|
||||||
|
|
||||||
function refresh() {
|
|
||||||
$contributions = getContributions();
|
|
||||||
hue = Math.round(Math.random() * 360);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getContributions() {
|
|
||||||
return new Array(rows * depth).fill(0).map((value) => {
|
|
||||||
return Math.round(Math.random() * 10);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="controls">
|
|
||||||
<button on:click={refresh}>Refresh</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<SC.Canvas antialias alpha>
|
<SC.Canvas antialias alpha>
|
||||||
{#each $contributions as contribution, index}
|
<SC.Mesh
|
||||||
<SC.Mesh
|
geometry={star}
|
||||||
scale={[1, contribution, 1]}
|
rotation={[-90, 0, 0]}
|
||||||
geometry={new THREE.BoxGeometry()}
|
material={new THREE.MeshStandardMaterial({
|
||||||
material={new THREE.MeshStandardMaterial({
|
color: 0xffff00,
|
||||||
color: `hsl(${hue}, 50%, ${contribution * 10}%)`,
|
roughness: 0,
|
||||||
})}
|
metalness: 0.7,
|
||||||
position={[Math.floor(index / rows), contribution / 2, index % rows]}
|
})}
|
||||||
/>
|
/>
|
||||||
{/each}
|
<SC.PerspectiveCamera position={[3, 3, 3]} />
|
||||||
<SC.PerspectiveCamera position={[15, 15, 15]} />
|
|
||||||
<SC.OrbitControls />
|
<SC.OrbitControls />
|
||||||
<SC.AmbientLight intensity={0.5} />
|
<SC.AmbientLight intensity={1} />
|
||||||
<SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
|
<SC.DirectionalLight intensity={0.5} position={[-3, 5, 7]} />
|
||||||
</SC.Canvas>
|
</SC.Canvas>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
123
static/star.gltf
Normal file
123
static/star.gltf
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
{
|
||||||
|
"asset" : {
|
||||||
|
"generator" : "Khronos glTF Blender I/O v1.7.33",
|
||||||
|
"version" : "2.0"
|
||||||
|
},
|
||||||
|
"scene" : 0,
|
||||||
|
"scenes" : [
|
||||||
|
{
|
||||||
|
"name" : "Scene",
|
||||||
|
"nodes" : [
|
||||||
|
0
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"nodes" : [
|
||||||
|
{
|
||||||
|
"mesh" : 0,
|
||||||
|
"name" : "star",
|
||||||
|
"rotation" : [
|
||||||
|
0.1077992394566536,
|
||||||
|
0.1077992394566536,
|
||||||
|
-0.6988414525985718,
|
||||||
|
0.698841392993927
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"materials" : [
|
||||||
|
{
|
||||||
|
"doubleSided" : true,
|
||||||
|
"name" : "Material.001",
|
||||||
|
"pbrMetallicRoughness" : {
|
||||||
|
"baseColorFactor" : [
|
||||||
|
0.800000011920929,
|
||||||
|
0.800000011920929,
|
||||||
|
0.800000011920929,
|
||||||
|
1
|
||||||
|
],
|
||||||
|
"metallicFactor" : 0,
|
||||||
|
"roughnessFactor" : 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"meshes" : [
|
||||||
|
{
|
||||||
|
"name" : "Circle.003",
|
||||||
|
"primitives" : [
|
||||||
|
{
|
||||||
|
"attributes" : {
|
||||||
|
"POSITION" : 0,
|
||||||
|
"NORMAL" : 1,
|
||||||
|
"TEXCOORD_0" : 2
|
||||||
|
},
|
||||||
|
"indices" : 3,
|
||||||
|
"material" : 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"accessors" : [
|
||||||
|
{
|
||||||
|
"bufferView" : 0,
|
||||||
|
"componentType" : 5126,
|
||||||
|
"count" : 22,
|
||||||
|
"max" : [
|
||||||
|
0.9510564804077148,
|
||||||
|
0.3028928339481354,
|
||||||
|
0.8090170621871948
|
||||||
|
],
|
||||||
|
"min" : [
|
||||||
|
-0.9510565400123596,
|
||||||
|
-0.17501738667488098,
|
||||||
|
-1
|
||||||
|
],
|
||||||
|
"type" : "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView" : 1,
|
||||||
|
"componentType" : 5126,
|
||||||
|
"count" : 22,
|
||||||
|
"type" : "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView" : 2,
|
||||||
|
"componentType" : 5126,
|
||||||
|
"count" : 22,
|
||||||
|
"type" : "VEC2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView" : 3,
|
||||||
|
"componentType" : 5123,
|
||||||
|
"count" : 120,
|
||||||
|
"type" : "SCALAR"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"bufferViews" : [
|
||||||
|
{
|
||||||
|
"buffer" : 0,
|
||||||
|
"byteLength" : 264,
|
||||||
|
"byteOffset" : 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"buffer" : 0,
|
||||||
|
"byteLength" : 264,
|
||||||
|
"byteOffset" : 264
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"buffer" : 0,
|
||||||
|
"byteLength" : 176,
|
||||||
|
"byteOffset" : 528
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"buffer" : 0,
|
||||||
|
"byteLength" : 240,
|
||||||
|
"byteOffset" : 704
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"buffers" : [
|
||||||
|
{
|
||||||
|
"byteLength" : 944,
|
||||||
|
"uri" : "data:application/octet-stream;base64,AAAAAMI3M74AAACAAAAAAAAAAAAAAIC/upqivgAAAABFzt++cXhzvwAAAAB5N56+uowDvwAAAADx+Co+F3kWvwAAAAC+G08/1b2IMwAAAADPUQo/GnkWPwAAAAC8G08/u4wDPwAAAADz+Co+cHhzPwAAAAB+N56+u5qiPgAAAABEzt++AAAAAMUUmz4AAACAAAAAAMnxAj4AAIC/upqivsnxAj5Fzt++cXhzv8nxAj55N56+uowDv8nxAj7x+Co+F3kWv8nxAj6+G08/1b2IM8nxAj7PUQo/GnkWP8nxAj68G08/u4wDP8nxAj7z+Co+cHhzP8nxAj5+N56+u5qiPsnxAj5Ezt++AAAAAAAAgL8AAACAAAAAAAQrAr+5bVy/vNXdvlr9LL8xqRi/o6NRvwQrAr8QOYi+Z3czv1r9LL/SOWk+A5EBvwQrAr9lVTI/AAAAAFr9LL95szw/A5EBPwQrAr9lVTI/Z3czP1r9LL/SOWk+o6NRPwQrAr8QOYi+vNXdPlr9LL8xqRi/AAAAAAAAgD8AAACAAAAAAAQrAj+5bVy/vNXdvlr9LD8xqRi/o6NRvwQrAj8QOYi+Z3czv1r9LD/SOWk+A5EBvwQrAj9lVTI/AAAAAFr9LD95szw/A5EBPwQrAj9lVTI/Z3czP1r9LD/SOWk+o6NRPwQrAj8QOYi+vNXdPlr9LD8xqRi/AAAAPwAAAD8AAAA/AAAAANANUz4QkcM98HjIPETksD4Aecg8340nP9INUz7fjWc/AQAAPwAAgD+NPEs/3o1nPzi8eT/fjSc/OLx5P0DksD6MPEs/EJHDPQAAAD8AAAA/AAAAPwAAAADQDVM+EJHDPfB4yDxE5LA+AHnIPN+NJz/SDVM+341nPwEAAD8AAIA/jTxLP96NZz84vHk/340nPzi8eT9A5LA+jDxLPxCRwz0AAAIAAQAAAAMAAgAAAAQAAwAAAAUABAAAAAYABQAAAAcABgAAAAgABwAAAAkACAAAAAoACQAAAAEACgALAAwADQALAA0ADgALAA4ADwALAA8AEAALABAAEQALABEAEgALABIAEwALABMAFAALABQAFQALABUADAAKAAEADAAKAAwAFQAFAAYAEQAFABEAEAAHAAgAEwAHABMAEgACAAMADgACAA4ADQABAAIADQABAA0ADAAJAAoAFQAJABUAFAAEAAUAEAAEABAADwAGAAcAEgAGABIAEQAIAAkAFAAIABQAEwADAAQADwADAA8ADgA="
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue