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

61
src/routes/index.svelte
View file

@ -15,39 +15,36 @@
}) })
</script> </script>
<SC.Canvas antialias alpha shadows> <header>
<SC.Mesh <div class="star-container">
geometry={star} <SC.Canvas antialias alpha>
rotation={[-90, 0, rotation]} <SC.Mesh
material={new THREE.MeshStandardMaterial({ geometry={star}
color: 0xffff00, rotation={[-90, 0, rotation]}
roughness: 0, material={new THREE.MeshStandardMaterial({
metalness: 0.7, color: 0xffff00,
})} roughness: 0,
castShadow metalness: 0.7,
/> })}
<SC.Group position={[ 0, -2, 0 ]}> />
<SC.Mesh <SC.PerspectiveCamera position={[3, 1, 3]} />
receiveShadow <SC.AmbientLight intensity={1} />
geometry={new THREE.PlaneGeometry(100,100)} <SC.DirectionalLight intensity={0.7} />
material={new THREE.MeshStandardMaterial({ color: 'grey' })} <SC.PointLight intensity={1} position={[2, 5, 2]} />
rotation={[-Math.PI / 2, 0, 0]} </SC.Canvas>
/> </div>
<SC.Primitive <h1>Star World</h1>
position={[ 0, 0.001, 0]} </header>
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> <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>