Skip to content

Instantly share code, notes, and snippets.

@nasser
Last active March 16, 2021 15:40
Show Gist options
  • Save nasser/0ed841b745b2271d315c8af38fd95063 to your computer and use it in GitHub Desktop.
Save nasser/0ed841b745b2271d315c8af38fd95063 to your computer and use it in GitHub Desktop.
a three.js boilerplate scene in a single 30 line self-contained html file
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.module.js"
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js"
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75)
camera.position.z = 4
var renderer = new THREE.WebGLRenderer()
document.body.appendChild(renderer.domElement)
window.onresize = function () {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}
window.onresize()
scene.add(new THREE.GridHelper(10, 10))
new OrbitControls(camera, renderer.domElement)
function render() {
requestAnimationFrame(render)
renderer.render(scene, camera)
}
render()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment