2022-05-03 02:34:11 +00:00
|
|
|
<script>
|
|
|
|
|
import * as THREE from 'three';
|
2022-05-04 02:04:11 +00:00
|
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
2022-05-03 02:34:11 +00:00
|
|
|
import * as SC from 'svelte-cubed';
|
2022-05-04 02:04:11 +00:00
|
|
|
let star;
|
|
|
|
|
let loader = new GLTFLoader();
|
2022-05-03 02:34:11 +00:00
|
|
|
|
2022-05-04 02:04:11 +00:00
|
|
|
loader.load('star.gltf', (gltf) => {
|
|
|
|
|
star = gltf.scene.children[0].geometry;
|
|
|
|
|
});
|
2022-05-03 02:34:11 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<SC.Canvas antialias alpha>
|
2022-05-04 02:04:11 +00:00
|
|
|
<SC.Mesh
|
|
|
|
|
geometry={star}
|
|
|
|
|
rotation={[-90, 0, 0]}
|
|
|
|
|
material={new THREE.MeshStandardMaterial({
|
|
|
|
|
color: 0xffff00,
|
|
|
|
|
roughness: 0,
|
|
|
|
|
metalness: 0.7,
|
|
|
|
|
})}
|
|
|
|
|
/>
|
|
|
|
|
<SC.PerspectiveCamera position={[3, 3, 3]} />
|
2022-05-03 02:34:11 +00:00
|
|
|
<SC.OrbitControls />
|
2022-05-04 02:04:11 +00:00
|
|
|
<SC.AmbientLight intensity={1} />
|
|
|
|
|
<SC.DirectionalLight intensity={0.5} position={[-3, 5, 7]} />
|
2022-05-03 02:34:11 +00:00
|
|
|
</SC.Canvas>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.controls {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
</style>
|