three.js Getting started with three.js Hello world!
Example
The example is taken from threejs website.
You may want to download three.js and change the script source below.
There are many more advanced examples under this link.
HTML:
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script>
// Our JavaScript will go here.
</script>
</body>
The basic scene with a static cube in JavaScript:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
To actually see anything, we need a Render() loop:
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
