THREE.js Starter Kit - Disco Fireflies
How do I make an three.js starter kit - disco fireflies?
A starting point for a THREE.js pen; renderer, scene, and camera ready to go. Now our fireflies are random colors!. What is a three.js starter kit - disco fireflies? How do you make a three.js starter kit - disco fireflies? This script and codes were developed by Matthew Chase on 25 July 2022, Monday.
THREE.js Starter Kit - Disco Fireflies - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>THREE.js Starter Kit - Disco Fireflies</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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 Starter Kit - Disco Fireflies - Script Codes CSS Codes
body{ margin: 0; }
canvas{ width: 100%; height: 100%; }
THREE.js Starter Kit - Disco Fireflies - Script Codes JS Codes
(function(){ 'use strict'; var tau = Math.PI * 2; var width, height; var scene, camera, renderer, pointCloud; function onDocumentReady(){ initialize(); /* DO STUFF! */ var material = new THREE.PointCloudMaterial({ size: 5, vertexColors: THREE.VertexColors }); var geometry = new THREE.Geometry(); var x, y, z; _.times(1000, function(n){ x = (Math.random() * 800) - 400; y = (Math.random() * 800) - 400; z = (Math.random() * 800) - 400; geometry.vertices.push(new THREE.Vector3(x, y, z)); geometry.colors.push(new THREE.Color(Math.random(), Math.random(), Math.random())); }); var pointCloud = new THREE.PointCloud(geometry, material); scene.add(pointCloud); function render(){ window.requestAnimationFrame(render); _.forEach(geometry.vertices, function(particle, index){ var dX, dY, dZ; dX = Math.random() * 2 - 1; dY = Math.random() * 2 - 1; dZ = Math.random() * 2 - 1; particle.add(new THREE.Vector3(dX, dY, dZ)); geometry.colors[index] = new THREE.Color(Math.random(), Math.random(), Math.random()); }); geometry.verticesNeedUpdate = true; geometry.colorsNeedUpdate = true; renderer.render(scene, camera); } render(); } function initialize(){ scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(120, 16 / 9, 1, 1000); renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); window.addEventListener('resize', onWindowResize); onWindowResize(); } function onWindowResize(){ width = window.innerWidth; height = window.innerHeight; updateRendererSize(); } function updateRendererSize(){ renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); } document.addEventListener('DOMContentLoaded', onDocumentReady);
})();
Developer | Matthew Chase |
Username | antishow |
Uploaded | July 25, 2022 |
Rating | 3 |
Size | 2,387 Kb |
Views | 72,864 |
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!
Name | Size |
THREE.js Starter Kit | 1,996 Kb |
Flex-Grow Proportions | 3,276 Kb |
Curvy Slider | 2,557 Kb |
Quick Picross | 5,339 Kb |
Fixed Aspect Ratio | 2,511 Kb |
Sort Floated UL into columns | 1,950 Kb |
THREE.js PointCloud | 3,960 Kb |
Simple Snowflakes | 2,650 Kb |
The Same Three Callouts You Always Do | 2,008 Kb |
Slow Click Button | 3,035 Kb |
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!
Name | Username | Size |
Tumblr API | Juanv911 | 2,436 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Lecture 1 | Law | 0 Kb |
Minimelephant | Smashlee | 2,507 Kb |
Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
Tooltip in table | Roine | 3,713 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!