Skip to content

Instantly share code, notes, and snippets.

@tetafro

tetafro/ THREE.js example

Last active September 28, 2016 12:03
Show Gist options
  • Save tetafro/0ebe2513999a87b1df4ca298fcc9ebaa to your computer and use it in GitHub Desktop.
Save tetafro/0ebe2513999a87b1df4ca298fcc9ebaa to your computer and use it in GitHub Desktop.
Download ZIP
Rendering cube with THREE.js
Raw
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>THREE.js</title>
</head>
<body>
<div id="three"></div>
<script type="text/javascript" src="./libs/three.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
Raw
script.js
var container = document.getElementById('three');
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
var camera = new THREE.PerspectiveCamera(
45, window.innerWidth / window.innerHeight , 0.1, 1000
);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
container.appendChild(renderer.domElement);
renderer.render(scene, camera);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment