Three.js knot
My second experiment on three.js
by Shaojiang Cai
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
<script src="http://jsfiddle.net/cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
CSS
html, body {
padding:0px;
margin:0px;
}
canvas {
width: 100%;
height: 100%
}
JavaScript
var container, stats;
var camera, scene, projector, renderer;
var particleMaterial;
var objects = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML =
'<a href="http://threejs.org" target="_blank">three.js</a> - clickable objects';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight,
1, 10000);
camera.position.set(0, 300, 500);
scene = new THREE.Scene();
var geometry = new THREE.CubeGeometry(100, 100, 100);
for (var i = 0; i < 5; i++) {
var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: Math.random() * 0xffffff,
opacity: 0.5
}));
object.position.x = i;
object.position.y = i * 10 + i * 100;
object.position.z = i;
console.log(object);
switch (i) {
case 0:
object.userData = {
URL: "http://google.com"
};
break;
case 1:
object.userData = {
URL: "http://yahoo.com"
};
break;
case 2:
object.userData = {
URL: "http://msn.com"
};
break;
case 3:
object.userData = {
URL: "http://engadget.com"
};
break;
case 4:
object.userData = {
URL: "http://stackoverflow.com"
};
break;
}
scene.add(object);
objects.push(object);
}
var PI2 = Math.PI * 2;
particleMaterial = new...