Home

Welcome to the DevelopJunior wiki!

var scene = new THREE.Scene();: Crea una nueva escena en Three.js.

document.addEventListener('mousemove', onMouseMove, false);: Agrega un controlador de eventos para el evento "mousemove" al documento. Cuando se produce este evento, se llama a la función onMouseMove().

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);: Crea una nueva cámara perspectiva en la escena. Los parámetros especifican el ángulo de visión de la cámara (75 grados), la relación de aspecto (ancho de la ventana dividido por altura de la ventana), la distancia mínima y máxima a la que se pueden ver los objetos de la escena.

var mouseX;: Declara una variable global llamada mouseX sin asignarle un valor.

var mouseY;: Declara una variable global llamada mouseY sin asignarle un valor.

var renderer = new THREE.WebGLRenderer();: Crea un nuevo renderizador WebGL para dibujar la escena en el navegador.

renderer.setSize(window.innerWidth, window.innerHeight);: Establece el tamaño del renderizador en el ancho y alto de la ventana del navegador.

document.body.appendChild(renderer.domElement);: Agrega el elemento del renderizador al cuerpo del documento HTML.

window.addEventListener("resize", function () {: Agrega un controlador de eventos para el evento "resize" de la ventana. Cuando se produce este evento, se llama a la función anónima que sigue.

var distance = Math.min(200, window.innerWidth / 4);: Declara una variable llamada distance y le asigna el menor valor entre 200 y el ancho de la ventana dividido por 4.

var geometry = new THREE.Geometry();: Crea una nueva geometría vacía en Three.js.

for (var i = 0; i < 1600; i++) {: Inicia un bucle que se ejecuta 1600 veces.

var vertex = new THREE.Vector3();: Crea un nuevo vector en Three.js.

var theta = THREE.Math.randFloatSpread(360) * Math.PI / 180;: Declara una variable llamada theta y le asigna un valor aleatorio entre -360 y 360 grados convertido a radianes.

var phi = THREE.Math.randFloatSpread(360) * Math.PI /180;: Declara una

vertex.x = distance * Math.sin(theta) * Math.cos(phi);: Establece la coordenada x del vector en un valor basado en distance, theta y phi.

vertex.y = distance * Math.sin(theta) * Math.sin(phi);: Establece la coordenada y del vector en un valor basado en distance, theta y phi.

vertex.z = distance * Math.cos(theta);: Establece la coordenada z del vector en un valor basado en distance y theta.

geometry.vertices.push(vertex);: Agrega el vector a la geometría.

var particles = new THREE.Points(geometry, new THREE.PointsMaterial({ color: 0xff44ff, size: 2 }));: Crea un nuevo conjunto de partículas a partir de la geometría y un material de puntos con un color rosa claro y un tamaño de 2.

particles.boundingSphere = 50;: Establece la esfera de colisión del conjunto de partículas en 50.

var renderingParent = new THREE.Group();: Crea un nuevo grupo vacío en Three.js.

renderingParent.add(particles);: Agrega el conjunto de partículas al grupo.

var resizeContainer = new THREE.Group();: Crea un nuevo grupo vacío en Three.js.

resizeContainer.add(renderingParent);: Agrega el grupo anterior al nuevo grupo.

scene.add(resizeContainer);: Agrega el último grupo a la escena.

camera.position.z = 400;: Establece la posición z de la cámara

var animate = function () {: Declara una función llamada animate().

requestAnimationFrame(animate);: Solicita al navegador que ejecute la función animate() en el próximo ciclo de animación.

renderer.render(scene, camera);: Renderiza la escena utilizando la cámara.

var myTween;: Declara una variable global llamada myTween sin asignarle un valor.

function onMouseMove(event) {: Declara una función llamada onMouseMove() que toma un parámetro llamado event.

if (myTween) myTween.kill();: Si myTween tiene un valor, detiene la animación.

mouseX = (event.clientX / window.innerWidth) * 2 - 1;: Establece el valor de mouseX en la posición x del cursor del mouse relativa a la ventana del navegador.

mouseY = - (event.clientY / window.innerHeight) * 2 + 1;: Establece el valor de mouseY en la posición y del cursor del mouse relativa a la ventana del navegador.

`myTween = g

myTween = gsap.to(particles.rotation, { duration: 0.1, x: mouseY * -1, y: mouseX });: Utiliza la biblioteca GSAP para crear una animación que cambia la rotación del conjunto de partículas en el eje x y y durante 0.1 segundos. Los valores de rotación se basan en mouseY y mouseX.

var animProps = { scale: 1, xRot: 0, yRot: 0 };: Declara un objeto llamado animProps con tres propiedades: scale, xRot y yRot, todas inicializadas en 0.

gsap.to(animProps, {: Utiliza la biblioteca GSAP para crear una animación