flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/shapecraft.
flo-bit.dev/shapecraft/
1.6 kB
42 lines
1---
2---
3<canvas id="quickstart-demo" style="width:100%;height:400px;border-radius:8px;background:#1a1a2e;display:block;"></canvas>
4
5<script>
6 async function init() {
7 const THREE = await import('three')
8 const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js')
9 const { box, sphere, merge } = await import('shapecraft')
10 const { toThreeMesh } = await import('shapecraft/three')
11
12 const canvas = document.getElementById('quickstart-demo') as HTMLCanvasElement
13 if (!canvas) return
14
15 const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
16 renderer.setSize(canvas.clientWidth, canvas.clientHeight)
17 const scene = new THREE.Scene()
18 scene.background = new THREE.Color(0x2a2a3a)
19 const camera = new THREE.PerspectiveCamera(50, canvas.clientWidth / canvas.clientHeight, 0.1, 100)
20 camera.position.set(3, 2, 4)
21 const controls = new OrbitControls(camera, canvas)
22 controls.target.set(0, 0.5, 0)
23 controls.enableDamping = true
24 controls.update()
25
26 scene.add(new THREE.HemisphereLight(0x87ceeb, 0x3a5a2a, 0.6))
27 const sun = new THREE.DirectionalLight(0xfff4e0, 1.2)
28 sun.position.set(5, 8, 5)
29 scene.add(sun)
30
31 const b = box({ size: 1 }).vertexColor('#cc8844')
32 const s = sphere({ radius: 0.5 }).translate(2, 0, 0).vertexColor('#4488cc')
33 scene.add(toThreeMesh(merge(b, s).translate(-1, 0.5, 0)))
34
35 ;(function animate() {
36 requestAnimationFrame(animate)
37 controls.update()
38 renderer.render(scene, camera)
39 })()
40 }
41 init()
42</script>