var cube, pyramid, renderer, scene, camera;
var width = 500;
var height = 500;
init();
render();
animate();
function init() {
renderer = new THREE.WebGLRenderer({antialias:true, alpha: true});
renderer.setSize(width, height);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
scene.add( new THREE.AxisHelper( 20 ) );
var aspect = width / height;
var d = 15;
camera = new THREE.OrthographicCamera( - d * aspect, d * aspect, d, - d, 1, 1000 );
camera.position.set( d, d, d );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls( camera );
controls.minDistance = 10;
controls.maxDistance = 50;
pyramid = coloredPyramid();
pyramid.position.set(0, 0, 0);
scene.add(pyramid);
cube = Cube();
cube.position.set( 5, 5, 5 );
scene.add(cube);
}
function Cube () {
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
wireframe: true,
vertexColors: THREE.VertexColors
});
var color, face, numberOfSides, vertexIndex;
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var size = 10;
var point;
var cubeGeometry = new THREE.CubeGeometry( size, size, size, 1, 1, 1 );
for ( var i = 0; i < cubeGeometry.faces.length; i++ ) {
face = cubeGeometry.faces[ i ];
numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
for( var j = 0; j < numberOfSides; j++ ) {
vertexIndex = face[ faceIndices[ j ] ];
point = cubeGeometry.vertices[ vertexIndex ];
color = new THREE.Color( 0xffffff );
color.setRGB( 0.5 + point.x / size, 0.5 + point.y / size, 0.5 + point.z / size );
face.vertexColors[j] = color;
}
}
item = new THREE.Mesh( cubeGeometry, cubeMaterial );
return item;
}
function coloredPyramid () {
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
vertexColors: THREE.VertexColors
});
var color, face, numberOfSides, vertexIndex;
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var size = 10;
var point;
var geometry = Pyramid();
for ( var i = 0; i < geometry.faces.length; i++ ) {
face = geometry.faces[ i ];
for( var j = 0; j < 3; j++ ) {
vertexIndex = face[ faceIndices[ j ] ];
point = geometry.vertices[ vertexIndex ];
color = new THREE.Color( 0xffffff );
color.setRGB(point.x / size, point.y / size, point.z / size );
face.vertexColors[j] = color;
}
}
item = new THREE.Mesh( geometry, material );
return item;
}
function plainPyramid () {
var geometry = Pyramid();
var material = new THREE.MeshBasicMaterial( {color:0xffffff} );
var item = new THREE.Mesh( geometry, material );
return item;
}
function Pyramid () {
var width, height, legnth;
width = height = length = 10;
var geometry = new THREE.Geometry();
geometry.vertices = [
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 0, 1, 0 ),
new THREE.Vector3( 1, 1, 0 ),
new THREE.Vector3( 1, 0, 0 ),
new THREE.Vector3( 1, 1, 1 )
];
geometry.faces = [
new THREE.Face3( 0, 1, 2 ),
new THREE.Face3( 0, 2, 3 ),
new THREE.Face3( 1, 0, 4 ),
new THREE.Face3( 2, 1, 4 ),
new THREE.Face3( 3, 2, 4 ),
new THREE.Face3( 0, 3, 4 )
];
var transformation = new THREE.Matrix4().makeScale( width, length, height );
geometry.applyMatrix( transformation );
return geometry;
}
function render() {
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}