Netzwerk
by bejnar
CSS
body {
overflow: hidden;
}
JavaScript
var camera, scene, renderer;
var geometry, material, globe1, globe1, globe2, globe3, globe4, globe5, globe6, globe7;
var circGeometry, circMaterial;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
var radius = 300,
segments = 66,
circGeometry = new THREE.CircleGeometry( radius, segments );
circMaterial = new THREE.LineBasicMaterial( {
color: 0x000000,
linewidth: 8
});
// Remove center vertex
circGeometry.vertices.shift();
globe1 = new THREE.Line(circGeometry, circMaterial);
globe2 = new THREE.Line(circGeometry, circMaterial);
globe3 = new THREE.Line(circGeometry, circMaterial);
globe4 = new THREE.Line(circGeometry, circMaterial);
globe5 = new THREE.Line(circGeometry, circMaterial);
globe6 = new THREE.Line(circGeometry, circMaterial);
globe7 = new THREE.Line(circGeometry, circMaterial);
globe1.rotation.y = 1;
globe2.rotation.y = 1;
globe3.rotation.y = 1;
globe4.rotation.y = 1;
globe5.rotation.y = 1;
globe6.rotation.y = 1;
globe7.rotation.y = 1;
globe1.rotation.x = 1;
globe2.rotation.x = 1;
globe3.rotation.x = 1;
globe4.rotation.x = 1;
globe5.rotation.x = 1;
globe6.rotation.x = 1;
globe7.rotation.x = 1;
scene.add(globe1);
scene.add(globe2);
scene.add(globe3);
scene.add(globe4);
scene.add(globe5);
scene.add(globe6);
scene.add(globe7);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(animate);
globe1.rotation.x += 0.001;
globe1.rotation.y += 0.001;
globe2.rotation.x += 0.002;
...