π Creating your first scene β
This is a port based on the three.js - Creating a scene tutorial.
π Setup your template β
html
<!-- Add your container element -->
<div id="three-app"></div>
<!-- Import your script as a `module` -->
<script type="module" src="/main.ts"></script>
π¨ Add some styles β
css
#three-app {
width: 100%;
aspect-ratio: 16 / 9;
}
π Write your awesome 3D script β
ts
/**
* Three App - First Scene.
* This is a port based on the [three.js - Creating a scene](https://threejs.org/manual/#en/creating-a-scene) tutorial.
*/
import { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'
import { createThreeApp } from '@slzr/three-app'
(async () => {
const geometry = new BoxGeometry(1, 1, 1)
const material = new MeshBasicMaterial({ color: 0x00FF00 })
const cube = new Mesh(geometry, material)
const threeApp = await createThreeApp({
container: document.getElementById('three-app')!,
onInit({ scene }) {
scene.add(cube)
},
onRender() {
cube.rotation.x += 0.01
cube.rotation.y += 0.01
},
})
threeApp.start()
})()
β That's pretty much it. β
Check out the π¦Before You Start section and the available examples for inspiration and useful resources.