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

Move star full canvas to different file and start adding star in regular HTML.

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-04 12:46:41 -07:00
parent e6a39af87e
commit 61dcbc31a0
2 changed files with 82 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/routes/index.svelte
View file

@ -15,7 +15,9 @@
}) })
</script> </script>
<SC.Canvas antialias alpha shadows> <header>
<div class="star-container">
<SC.Canvas antialias alpha>
<SC.Mesh <SC.Mesh
geometry={star} geometry={star}
rotation={[-90, 0, rotation]} rotation={[-90, 0, rotation]}
@ -24,30 +26,25 @@
roughness: 0, roughness: 0,
metalness: 0.7, metalness: 0.7,
})} })}
castShadow
/> />
<SC.Group position={[ 0, -2, 0 ]}>
<SC.Mesh
receiveShadow
geometry={new THREE.PlaneGeometry(100,100)}
material={new THREE.MeshStandardMaterial({ color: 'grey' })}
rotation={[-Math.PI / 2, 0, 0]}
/>
<SC.Primitive
position={[ 0, 0.001, 0]}
object={new THREE.GridHelper(100, 100, 0x444444, 0x555555)}
/>
</SC.Group>
<SC.PerspectiveCamera position={[3, 1, 3]} /> <SC.PerspectiveCamera position={[3, 1, 3]} />
<SC.OrbitControls />
<SC.AmbientLight intensity={1} /> <SC.AmbientLight intensity={1} />
<SC.DirectionalLight shadow={{ mapSize: [ 2048, 2048 ] }} intensity={0.7} /> <SC.DirectionalLight intensity={0.7} />
<SC.PointLight intensity={1} position={[2, 5, 2]} /> <SC.PointLight intensity={1} position={[2, 5, 2]} />
</SC.Canvas> </SC.Canvas>
</div>
<h1>Star World</h1>
</header>
<style> <style>
.controls { header {
position: absolute; display: flex;
z-index: 10; font-family: Arial, Helvetica, sans-serif;
}
.star-container {
position: relative;
width: 100px;
height: 100px;
} }
</style> </style>

53
src/routes/star.svelte Normal file
View file

@ -0,0 +1,53 @@
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import * as SC from 'svelte-cubed';
let star;
let rotation = 0;
let loader = new GLTFLoader();
loader.load('star.gltf', (gltf) => {
star = gltf.scene.children[0].geometry;
});
SC.onFrame(() => {
rotation += 0.01
})
</script>
<SC.Canvas antialias alpha shadows>
<SC.Mesh
geometry={star}
rotation={[-90, 0, rotation]}
material={new THREE.MeshStandardMaterial({
color: 0xffff00,
roughness: 0,
metalness: 0.7,
})}
castShadow
/>
<SC.Group position={[ 0, -2, 0 ]}>
<SC.Mesh
receiveShadow
geometry={new THREE.PlaneGeometry(100,100)}
material={new THREE.MeshStandardMaterial({ color: 'grey' })}
rotation={[-Math.PI / 2, 0, 0]}
/>
<SC.Primitive
position={[ 0, 0.001, 0]}
object={new THREE.GridHelper(100, 100, 0x444444, 0x555555)}
/>
</SC.Group>
<SC.PerspectiveCamera position={[3, 1, 3]} />
<SC.OrbitControls />
<SC.AmbientLight intensity={1} />
<SC.DirectionalLight shadow={{ mapSize: [ 2048, 2048 ] }} intensity={0.7} />
<SC.PointLight intensity={1} position={[2, 5, 2]} />
</SC.Canvas>
<style>
.controls {
position: absolute;
z-index: 10;
}
</style>