Skip to content

Instantly share code, notes, and snippets.

@tildebyte
Created December 19, 2016 16:39
Show Gist options
  • Save tildebyte/216b279bcba598da607a4cda43a0104b to your computer and use it in GitHub Desktop.
Save tildebyte/216b279bcba598da607a4cda43a0104b to your computer and use it in GitHub Desktop.
three.js template
<html lang="en">
<head>
<title>three.js webgl - helpers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
</body>
</html>
/*
(probably) Adapted from my Processing.py sketch of the same name.
Initial JS implementation on CodePen by Ben Alkov {date}.
Don't forget to check Settings for external JavaScript resources.
Boilerplate gist at https://git.io/v1aNv
*/
'use strict'
let scene,
camera,
renderer
window.requestAnimationFrame = platformRequestAnimationFrame()
function init() {
if (!Detector.webgl) {Detector.addGetWebGLMessage()}
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(
50, // F.O.V.
Width / Height, // Aspect.
0.1, // Near clip.
10000 // Far clip.
)
camera.position.z = 5
rendererConfig()
window.addEventListener('resize', onWindowResize, false)
}
function setup() {
}
function update() {
}
function animate() {
requestAnimationFrame(animate)
update()
renderer.render(scene, camera)
}
init()
setup()
animate()
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.js"></script>
<script src="https://rawgit.com/tildebyte/0cbc766c3586b24b544768a4747da34d/raw/4501b7606b0992459c7126b89d4f7cee6b539ebe/onWindowResize.js"></script>
<script src="https://rawgit.com/tildebyte/0cbc766c3586b24b544768a4747da34d/raw/1a57ffc13ac5c518f42f523ae8be5592a9d10405/platformRequestAnimationFrame.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/Detector.js"></script>
<script src="https://rawgit.com/tildebyte/0cbc766c3586b24b544768a4747da34d/raw/506be89b0f5dd2f9902c4014c91b82e98552b899/rendererConfig.js"></script>
<script src="https://rawgit.com/tildebyte/0cbc766c3586b24b544768a4747da34d/raw/fdd283e9b7888645d1e359a886593dc74d4373d0/constants.js"></script>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment