JSFiddle - React, Tailwind, and code Playground
by dbugger
HTML
<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
JavaScript
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );};
})();}
var WIDTH = 600,
HEIGHT= 400,
renderer, scene, camera, cube;
//Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
//Scene
scene = new THREE.Scene();
//Camera
camera = new THREE.PerspectiveCamera();
camera.position.set(110, 110, 250);
camera.lookAt(scene.position);
scene.add(camera);
//Cube
var materials = [
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://jsfiddle.net/img/logo.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://enriquemorenotent.com/wp-content/uploads/2012/02/1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://enriquemorenotent.com/wp-content/uploads/2012/02/1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://enriquemorenotent.com/wp-content/uploads/2012/02/1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://enriquemorenotent.com/wp-content/uploads/2012/02/1.png' ) } ),
new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( 'http://enriquemorenotent.com/wp-content/uploads/2012/02/1.png' ) } )
];
var geometry = new THREE.CubeGeometry( 40, 60, 40, 3, 3, 3, materials);
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial());
cube.position.set( 0, 0, 0 );
scene.add( cube );
function animate(){
...