THREE.js Starter Kit - Basic Sta--Fireflies
How do I make an three.js starter kit - basic sta--fireflies?
A starting point for a THREE.js pen; renderer, scene, and camera ready to go. PLUS SOME AWESOME STARS ZOMG! AND NOW THEY"RE MOVING WHATS HAPPENING!?. What is a three.js starter kit - basic sta--fireflies? How do you make a three.js starter kit - basic sta--fireflies? This script and codes were developed by Matthew Chase on 25 July 2022, Monday.
THREE.js Starter Kit - Basic Sta--Fireflies - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>THREE.js Starter Kit - Basic Sta--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 - Basic Sta--Fireflies - Script Codes CSS Codes
body{ margin: 0; }
canvas{ width: 100%; height: 100%; }
THREE.js Starter Kit - Basic Sta--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({ color: 0xffffcc }); 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)); }); var pointCloud = new THREE.PointCloud(geometry, material); scene.add(pointCloud); function render(){ window.requestAnimationFrame(render); _.forEach(geometry.vertices, function(particle){ 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.verticesNeedUpdate = 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,376 Kb |
Views | 85,008 |
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 |
Lodash is the shit | 2,841 Kb |
Flex-Grow Proportions | 3,276 Kb |
Grassssss tastes bad. | 2,275 Kb |
Mouse Effect - SVG Firework under click | 2,908 Kb |
Box Shadow Pixel Art Generator | 14,693 Kb |
THREE.js Starter Kit - Disco Fireflies | 2,387 Kb |
AnimationController | 3,390 Kb |
Curvy Slider | 2,557 Kb |
THREE.js Starter Kit | 1,996 Kb |
Fixed Aspect Ratio | 2,511 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 |
Price Comparison Table | Orrinward | 3,459 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Header | Er40 | 1,542 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 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!