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

Adding shadows and spin the star.

Browse source
This commit is contained in:
Bradley Shellnut 2022-05-04 12:40:27 -07:00
parent 3f62fac669
commit e6a39af87e
1 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/routes/index.svelte
View file

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