JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
JavaScript
var scene = new THREE.Scene();
document.addEventListener('pointermove', onPointerMove);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var mouseX;
var mouseY;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
var distance = Math.min(200, window.innerWidth / 4);
var points = [];
for (var i = 0; i < 1600; i++) {
var vertex = new THREE.Vector3();
var theta = THREE.Math.randFloatSpread(360);
var phi = THREE.Math.randFloatSpread(360);
vertex.x = distance * Math.sin(theta) * Math.cos(phi);
vertex.y = distance * Math.sin(theta) * Math.sin(phi);
vertex.z = distance * Math.cos(theta);
points.push(vertex);
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var particles = new THREE.Points(geometry, new THREE.PointsMaterial({
color: 0xff44ff,
size: 2
}));
particles.boundingSphere = 50;
var renderingParent = new THREE.Group();
renderingParent.add(particles);
var resizeContainer = new THREE.Group();
resizeContainer.add(renderingParent);
scene.add(resizeContainer);
camera.position.z = 400;
var animate = function() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
var myTween;
function onPointerMove(event) {
if (myTween)
myTween.kill();
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
myTween = gsap.to(particles.rotation, {
duration: 0.1,
x: mouseY * -1,
y: mouseX
});
//particles.rotation.x = mouseY*-1;
//particles.rotation.y = mouseX;
}
animate();
// Scaling animation
var animProps = {
scale:...