Time to introduce just how awesome THREE.js is.
With the following three files you too can begin building content with THREE.js that will work in any browser that supports WebGL.The files include the latest and greatest minified version of THREE.js.
three.min.js
Out of the box code to begin this project.
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, 1024 / 768 , 0.01, 10 );
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( 1024 , 768 );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}And a basic html file which references both THREE.js and the basic code for starting this project.
<html>
<head>
<title>Shapes TD</title>
</head>
<body oncontextmenu="return false;">
<script src='three.min.js'></script>
<script src='shapesTD.js'></script>
</body>
</html>
Once you click on the html file with both of the other files in the same directory you should see a spinning cube.
If not, check to see if you have WebGL support enabled on the browser you are using.
This will be my starting base. I figured I'd throw in the code as well so that if any beginner wants to have a shot at an extremely easy language, JavaScript, and a well documented API, then these files are for you.
Thanks for posting!
I've never used WebGL before, and even had to turn down a client project at one time because they wanted a 3D JavaScript application. This is something on my bucket list to learn in the future.