BradNut/svelte-3d
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-3d synced 2025-09-08 17:40:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 🔥 Adding 3D star GLTF file and messing with lighting and color

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-03 19:04:11 -07:00
parent c484607caa
commit 3dbb35264e
3 changed files with 191 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/routes/contributions.svelte Normal file
View 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>

42
src/routes/index.svelte
View file

@ -1,45 +1,29 @@
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as SC from 'svelte-cubed';
import { spring } from 'svelte/motion';
let star;
let loader = new GLTFLoader();
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);
loader.load('star.gltf', (gltf) => {
star = gltf.scene.children[0].geometry;
});
}
</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()}
geometry={star}
rotation={[-90, 0, 0]}
material={new THREE.MeshStandardMaterial({
color: `hsl(${hue}, 50%, ${contribution * 10}%)`,
color: 0xffff00,
roughness: 0,
metalness: 0.7,
})}
position={[Math.floor(index / rows), contribution / 2, index % rows]}
/>
{/each}
<SC.PerspectiveCamera position={[15, 15, 15]} />
<SC.PerspectiveCamera position={[3, 3, 3]} />
<SC.OrbitControls />
<SC.AmbientLight intensity={0.5} />
<SC.DirectionalLight intensity={1} position={[3, 5, -4]} />
<SC.AmbientLight intensity={1} />
<SC.DirectionalLight intensity={0.5} position={[-3, 5, 7]} />
</SC.Canvas>
<style>

123
static/star.gltf Normal file
View 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="
}
]
}