Skip to content

Instantly share code, notes, and snippets.

@Sean-Bradley
Created September 25, 2021 11:34
Show Gist options
  • Save Sean-Bradley/b7b223c33fd0b57b14178c19cc5d257a to your computer and use it in GitHub Desktop.
Save Sean-Bradley/b7b223c33fd0b57b14178c19cc5d257a to your computer and use it in GitHub Desktop.
The client.js from the Three.js Boilerplate
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.z = 2
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true,
})
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
window.addEventListener(
'resize',
() => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
render()
},
false
)
const stats = Stats()
document.body.appendChild(stats.dom)
const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.scale, 'x', -5, 5)
cubeFolder.add(cube.scale, 'y', -5, 5)
cubeFolder.add(cube.scale, 'z', -5, 5)
cubeFolder.open()
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(camera.position, 'z', 0, 10)
cameraFolder.open()
function animate() {
requestAnimationFrame(animate)
cube.rotation.x += 0.01
cube.rotation.y += 0.01
controls.update()
render()
stats.update()
}
function render() {
renderer.render(scene, camera)
}
animate()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment