Three.js Node Cloud

Developer
Cmalven
Size
5,315 Kb
Views
4,048
  1. Three.js Node Cloud Previews
  2. Three.js Node Cloud HTML Codes
  3. Three.js Node Cloud CSS Codes
  4. Three.js Node Cloud JS Codes

How do I make an three.js node cloud?

What is a three.js node cloud? How do you make a three.js node cloud? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

Three.js Node Cloud Previews
IQ Test

Three.js Node Cloud - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three.js Node Cloud</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Three.js Node Cloud - Script Codes CSS Codes

body { margin: 0px; background-color: #000000; overflow: hidden;
}

Three.js Node Cloud - Script Codes JS Codes

'use strict';
var camera;
var scene;
var renderer;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var minX = -500;
var maxX = 500;
var minY = -500;
var maxY = 500;
var minZ = -40;
var maxZ = 40;
var minNodeDistance = 90;
var numNodes = 300;
var maxConnections = 10;
var nodes = [];
var lines = [];
var movePeriodMin = 300;
var movePeriodMax = 500;
var moveAmplitude = 50;
var lightColors = [0xffffff, 0xff0000, 0xff00ff, 0x0000ff];
init();
animate();
function init() { //--------------------------------------------------------------- // Create and position camera //--------------------------------------------------------------- camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000); camera.position.z = 400; //--------------------------------------------------------------- // Create the scene //--------------------------------------------------------------- scene = new THREE.Scene(); //--------------------------------------------------------------- // Create the nodes //--------------------------------------------------------------- while (numNodes--) { var geometry = new THREE.CircleGeometry(5, 16); var material = new THREE.MeshPhongMaterial({ color: 0x00ff00, specular: 0x00ff00, shininess: 30, shading: THREE.SmoothShading }); var nodeMesh = new THREE.Mesh(geometry, material); nodeMesh.position.x = getNumberInRange(minX, maxX); nodeMesh.position.y = getNumberInRange(minY, maxY); nodeMesh.position.z = getNumberInRange(minZ, maxZ); nodeMesh.numConnections = 0; nodeMesh.moveIterationCount = 0; nodeMesh.movePeriod = Math.random() * (movePeriodMax - movePeriodMin) + movePeriodMin; nodeMesh.lines = { start: { lines: [], lineGeometry: [] }, end: { lines: [], lineGeometry: [] } }; scene.add(nodeMesh); nodes.push(nodeMesh); } //--------------------------------------------------------------- // Create the connections //--------------------------------------------------------------- _.each(nodes, function (node) { // Bail out if either node exceeds the max allowed connections if (node.numConnections > maxConnections) return false; // For each node, look for all nearby nodes _.each(nodes, function (otherNode) { var start = new THREE.Vector3(node.position.x, node.position.y, node.position.z); var end = new THREE.Vector3(otherNode.position.x, otherNode.position.y, otherNode.position.z); var distance = start.distanceTo(end); // Bail out if either node exceeds the max allowed connections if (otherNode.numConnections > maxConnections) return false; if (distance < minNodeDistance) { var geometry = new THREE.Geometry(); geometry.vertices.push(start, end); var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 10, shading: THREE.SmoothShading }); var line = new THREE.Line(geometry, material); scene.add(line); lines.push(line); // Add the lines node.lines.start.lines.push(line); node.lines.start.lineGeometry.push(geometry); otherNode.lines.end.lines.push(line); otherNode.lines.end.lineGeometry.push(geometry); // Increase the connections for the nodes // node.numConnections++; // otherNode.numConnections++; } }); }); //--------------------------------------------------------------- // Ambient Light //--------------------------------------------------------------- scene.add(new THREE.AmbientLight(0x002222)); //--------------------------------------------------------------- // Directional Lights //--------------------------------------------------------------- _.each(lightColors, function (color) { var directionalLight = new THREE.DirectionalLight(color, 0.1); directionalLight.position.x = getNumberInRange(0, 1); directionalLight.position.y = getNumberInRange(0, 1); directionalLight.position.z = 1; directionalLight.position.normalize(); scene.add(directionalLight); }); //--------------------------------------------------------------- // Controls //--------------------------------------------------------------- document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); //--------------------------------------------------------------- // Create the Renderer //--------------------------------------------------------------- renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //--------------------------------------------------------------- // Listen for the window to resize //--------------------------------------------------------------- window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);
}
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 updateCamera() { camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY - camera.position.y) * .05; camera.lookAt(scene.position);
}
function onDocumentMouseMove(event) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY;
}
function getNumberInRange(min, max) { return Math.random() * (max + Math.abs(min)) - Math.abs(min);
}
function onDocumentTouchStart(event) { if (event.touches.length > 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; }
}
function onDocumentTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches[0].pageX - windowHalfX; mouseY = event.touches[0].pageY - windowHalfY; }
}
function animate() { requestAnimationFrame(animate); // Face the nodes at the camera _.each(nodes, function (node) { node.quaternion.copy(camera.quaternion); node.position.z = moveAmplitude * Math.cos(Math.PI * 2 * node.moveIterationCount / node.movePeriod); // For each attached line, animate the points _.each([node.lines.start, node.lines.end], function (lineSet, idx) { _.each(lineSet.lines, function (line, lineIdx) { var lineGeometry = lineSet.lineGeometry[lineIdx]; lineGeometry.vertices[idx].z = node.position.z; line.geometry.verticesNeedUpdate = true; }); }); node.moveIterationCount++; }); updateCamera(); renderer.render(scene, camera);
}
Three.js Node Cloud - Script Codes
Three.js Node Cloud - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 5,315 Kb
Views 4,048
Do you need developer help for Three.js Node Cloud?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cmalven (cmalven) Script Codes
Name
Responsive Device Morph
TweenMax Smoke
Layer Tennis Header
Stacked Card Navigation
Chi Coast
Paper Shift
Input with Draggable Values
Hello, there.
Three.js Playground
Smooth Chars
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!