Skip to content

Instantly share code, notes, and snippets.

@mayakraft

mayakraft/template.html

Created March 13, 2020 01:01
Show Gist options
  • Save mayakraft/4c00450ff9578e002ef09a5cc9fd33eb to your computer and use it in GitHub Desktop.
Save mayakraft/4c00450ff9578e002ef09a5cc9fd33eb to your computer and use it in GitHub Desktop.
Download ZIP
threejs template
Raw
template.html
<!DOCTYPE html>
<head>
<title>three js</title>
<style>
/*css goes here*/
html, body {
margin: 0;
overflow: hidden; /*nice to not use this*/
}
</style>
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script>
window.onload = function () {
// we're gonna type here
var camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.01,
1000
);
camera.position.z = 10;
var scene = new THREE.Scene();
// add geometry here
var box = new THREE.BoxBufferGeometry(4, 4, 4,2, 2, 2);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true
});
var mesh = new THREE.Mesh(box, material);
scene.add(mesh);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment