You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
4.4 KiB
202 lines
4.4 KiB
var scene = new THREE.Scene();
|
|
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
var renderer = new THREE.WebGLRenderer();
|
|
var clock = new THREE.Clock();
|
|
|
|
// CONTROLS
|
|
var cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
cameraControls.target.set( 0, 0, 0 );
|
|
cameraControls.addEventListener( 'change', render );
|
|
|
|
var nodes = [];
|
|
var edges= [];
|
|
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
init();
|
|
render();
|
|
|
|
function init(){
|
|
camera.position.z = 20;
|
|
mydata.nodes.forEach(function(node){
|
|
var material = new THREE.MeshBasicMaterial( { color: node.color } );
|
|
var thisNode = new THREE.Mesh( geometry, material );
|
|
scene.add( thisNode );
|
|
thisNode.position.x = node.x;
|
|
thisNode.position.y = node.y;
|
|
thisNode.position.z = node.z;
|
|
nodes.push(thisNode);
|
|
});
|
|
|
|
mydata.edges.forEach(function(edge){
|
|
var thisMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
|
|
var thisGeometry = new THREE.Geometry();
|
|
thisGeometry.vertices.push(
|
|
new THREE.Vector3( mydata.nodes[edge.from].x, mydata.nodes[edge.from].y, mydata.nodes[edge.from].z ),
|
|
new THREE.Vector3( mydata.nodes[edge.to].x, mydata.nodes[edge.to].y, mydata.nodes[edge.to].z )
|
|
);
|
|
var thisEdge = new THREE.Line( thisGeometry, thisMaterial );
|
|
edges.push(thisEdge);
|
|
scene.add(thisEdge);
|
|
});
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
windowHalfX = window.innerWidth / 2;
|
|
windowHalfY = window.innerHeight / 2;
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}
|
|
|
|
function render() {
|
|
requestAnimationFrame( render );
|
|
|
|
var delta = clock.getElapsedTime();
|
|
// update the picking ray with the camera and mouse position
|
|
|
|
nodes.forEach(function(node){
|
|
node.rotation.x = delta * 45 * Math.PI / 180;
|
|
node.rotation.y = delta * 45 * Math.PI / 180;
|
|
});
|
|
|
|
renderer.render( scene, camera );
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
WIDTH = window.innerWidth; // Ancho de pantalla
|
|
HEIGHT = window.innerHeight; // Alto de pantalla
|
|
|
|
// Lienzo u objeto encargado del renderizado
|
|
var lienzo = new THREE.WebGLRenderer();
|
|
|
|
// Establecemos las dimensiones del lienzo
|
|
lienzo.setSize(
|
|
WIDTH,
|
|
HEIGHT
|
|
);
|
|
|
|
// Añadimos el lienzo a la página
|
|
document.body.appendChild(lienzo.domElement);
|
|
|
|
// Creamos la escena
|
|
var escena = new THREE.Scene;
|
|
|
|
var geometriaCubo = new THREE.CubeGeometry(
|
|
100, // Dimensiones en eje X
|
|
140, // Dimensiones en eje Y
|
|
100 // Dimensiones en eje Z
|
|
);
|
|
|
|
// Creamos una apariencia (de lila claro)
|
|
var aparienciaLila = new THREE.MeshLambertMaterial({
|
|
color: 0x9999FF // Color hexadecimal
|
|
});
|
|
|
|
// Generamos el prisma y le aplicamos la apariencia
|
|
var cubo = new THREE.Mesh(geometriaCubo, aparienciaLila);
|
|
|
|
// Añadimos el cubo a la escena
|
|
escena.add(cubo);
|
|
|
|
// Generamos la cámara
|
|
var camara = new THREE.PerspectiveCamera(
|
|
45, // Campo de visión
|
|
(WIDTH / HEIGHT), // Proporcion
|
|
0.1,
|
|
10000 // Campo de visión
|
|
);
|
|
|
|
// Situamos la cámara
|
|
camara.position.y = 160; // Elevamos la cámara
|
|
camara.position.z = 400; // Alejamos la cámara
|
|
|
|
|
|
// Centramos la vista en el cubo
|
|
camara.lookAt(cubo.position);
|
|
|
|
// Añadimos la cámara a la escena
|
|
escena.add(camara);
|
|
|
|
// Renderizamos la escena
|
|
lienzo.render(escena, camara);
|
|
|
|
|
|
// Creamos una par de focos de luz
|
|
var luz1 = new THREE.PointLight(0xff0044); // Rojizo
|
|
luz1.position.set(
|
|
120, // Posición en eje X
|
|
260, // Posición en eje Y
|
|
100 // Posición en eje Z
|
|
);
|
|
|
|
var luz2 = new THREE.PointLight(0x4499ff); // Azulado
|
|
luz2.position.set(
|
|
-100, // Posición en eje X
|
|
100, // Posición en eje Y
|
|
200 // Posición en eje Z
|
|
);
|
|
|
|
// Añadimos las luces
|
|
escena.add(luz1);
|
|
escena.add(luz2);
|
|
|
|
x=0; // Lo usamos para la oscilación
|
|
|
|
function renderizar(){
|
|
// Rotamos el cubo
|
|
cubo.rotation.y += Math.PI * 0.5 / 180; // Ángulo en radianes
|
|
cubo.rotation.z += Math.PI * Math.cos(x++ / 50) / 180;
|
|
// Renderizamos la escena
|
|
lienzo.render(escena, camara);
|
|
// Volvemos a renderizar
|
|
requestAnimationFrame(renderizar);
|
|
}
|
|
|
|
// Empezamos a renderizar
|
|
renderizar();
|
|
|
|
*/
|