Skip to content

Instantly share code, notes, and snippets.

@jankolkmeier

jankolkmeier/index.html

Created October 17, 2011 19:26
Show Gist options
  • Save jankolkmeier/1293517 to your computer and use it in GitHub Desktop.
Save jankolkmeier/1293517 to your computer and use it in GitHub Desktop.
Download ZIP
Vertex colors with canvas renderer
Raw
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript" src="./lib/Three.js"></script>
<script type="text/javascript" src="./lib/RequestAnimationFrame.js"></script>
<title>Threejs Canvas Vertexcolors</title>
</head>
<body>
<div id="canvas"></div>
</body>
<script type="text/javascript">
var container;
var camera, scene, renderer;
var model_json = {
"version" : 2,
"scale" : 1.000000,
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material",
"colorAmbient" : [0.0, 0.0, 0.0],
"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorSpecular" : [0.5, 0.5, 0.5],
"shading" : "Basic",
"specularCoef" : 50,
"transparency" : 1.0,
"vertexColors" : true
}],
"vertices": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-1.000000,0.999999,1.000000,1.000001,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000,-0.000000,2.000000,0.000000],
"morphTargets": [],
"normals": [0.650685,0.391339,-0.650685,-0.650685,0.391339,-0.650685,0.000000,1.000000,0.000000,-0.650685,0.391339,0.650685,0.650685,0.391339,0.650685,0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349],
"colors": [16711843,16777215,10486015,35839,9699072,16734464,16769536],
"uvs": [[]],
"faces": [162,4,7,8,0,0,1,2,0,0,0,162,7,6,8,0,1,3,2,0,0,0,162,6,5,8,0,3,4,2,0,0,0,162,5,4,8,0,4,0,2,0,0,0,162,4,0,3,0,0,5,6,2,2,2,162,4,3,7,0,0,6,1,2,2,2,162,2,6,7,0,7,3,1,3,3,3,162,2,7,3,0,7,1,6,3,3,3,162,1,5,2,0,8,4,7,4,4,4,162,5,6,2,0,4,3,7,4,4,4,162,0,4,1,0,5,0,8,5,5,5,162,4,5,1,0,0,4,8,5,5,5,162,0,1,2,0,5,8,7,6,6,6,162,0,2,3,0,5,7,6,6,6,6]
};
function init() {
container = document.getElementById('canvas');
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
scene = new THREE.Scene();
var loader = new THREE.JSONLoader( true );
loader.createModel(model_json, function(geometry) {
var materials = [
new THREE.MeshBasicMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } )
,new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
];
var object = new THREE.Mesh(geometry, materials);
object.scale.x = 100.0;
object.scale.y = 100.0;
object.scale.z = 100.0;
scene.add( object );
}, "");
renderer = new THREE.CanvasRenderer();
//renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
var radius = 600;
var theta = 0;
function render() {
theta += 0.4;
camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
init();
animate();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment