Skip to content

Instantly share code, notes, and snippets.

@HarryStevens
Last active Jul 4, 2019
Embed
What would you like to do?
THREE.js Boilerplate
license: gpl-3.0

This is my boilerplate template for getting started with a THREE.js scene.

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="scene"></div>
<div id="stats"></div>
<script src="https://unpkg.com/three@0.105.2/build/three.js"></script>
<script src="https://unpkg.com/three@0.105.2/examples/js/libs/stats.min.js"></script>
<script src="https://unpkg.com/three@0.105.2/examples/js/libs/dat.gui.min.js"></script>
<script>
const controls = {}
const gui = (_ => {
const gui = new dat.GUI();
return gui;
})();
const stats = (_ => {
const stats = new Stats();
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.getElementById("stats").appendChild(stats.domElement);
return stats;
})();
const scene = new THREE.Scene();
const camera = (_ => {
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(20, 20, 20);
camera.lookAt(scene.position);
return camera;
})();
const renderer = (_ => {
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#fff");
renderer.setPixelRatio(devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
document.getElementById("scene").appendChild(renderer.domElement);
return renderer;
})();
function animate(){
requestAnimationFrame(animate);
stats.update();
renderer.render(scene, camera);
}
animate();
function size(){
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
}
size();
onresize = size;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment