Node Waves

Developer
Matt Litherland
Size
3,216 Kb
Views
48,576
  1. Node Waves Previews
  2. Node Waves HTML Codes
  3. Node Waves CSS Codes
  4. Node Waves JS Codes

How do I make an node waves?

This is the first time i've really played with three.js. I've just been familiarising myself with the basics and will be using this in my new portfolio website i'm working on. Hope you like it!. What is a node waves? How do you make a node waves? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Node Waves Previews
IQ Test

Node Waves - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Node Waves</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="waves"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://threejs.org/examples/js/renderers/Projector.js'></script>
<script src='https://threejs.org/examples/js/renderers/CanvasRenderer.js'></script>
<script src='https://threejs.org/examples/js/libs/stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Node Waves - Script Codes CSS Codes

html, body, div, * { box-sizing: border-box;
}
body, html, div, canvas { background: #16141e;
}
body { padding: 1px;
}
#waves { display: block; margin: auto; width: 80%; height: 80%; position: relative; border: 1px solid transparent;
}
#waves canvas { width: 100%; height: 100%;
}

Node Waves - Script Codes JS Codes

var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 1;
init();
animate();
function init() { container = document.getElementById( 'waves' ); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene = new THREE.Scene(); particles = new Array(); var PI2 = Math.PI * 2; var material = new THREE.SpriteCanvasMaterial( { color: 0xe41656, fill: 0xe41656, program: function ( context ) { context.beginPath(); context.arc( 0, 0, 0.5, 0, PI2, true ); context.fill(); } } ); var i = 0; for ( var ix = 0; ix < AMOUNTX; ix ++ ) { for ( var iy = 0; iy < AMOUNTY; iy ++ ) { particle = particles[ i ++ ] = new THREE.Sprite( material ); particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); scene.add( particle ); } } renderer = new THREE.CanvasRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight, false ); // false sets size to container container.appendChild( renderer.domElement ); // stats = new Stats(); // container.appendChild( stats.dom ); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); // window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight, false );
}
//
function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY;
}
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 ); render(); stats.update();
}
function render() { camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; camera.lookAt( scene.position ); var i = 0; for ( var ix = 0; ix < AMOUNTX; ix ++ ) { for ( var iy = 0; iy < AMOUNTY; iy ++ ) { particle = particles[ i++ ]; particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 ); particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4; } } renderer.render( scene, camera ); renderer.setClearColorHex( 0xffffff, 0 ); count += 0.1;
}
Node Waves - Script Codes
Node Waves - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,216 Kb
Views 48,576
Do you need developer help for Node Waves?

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!

Matt Litherland (mattsince87) Script Codes
Name
Share Your Profile
Responsive Flot Chart
Smooth Anchor Scrolling
Slick Two Part Form
Cool Hidden Drawer
Animated SVG Path
Subtle CSS3 Heart Beat
Flat Origami Article
Wishlist Toggle Button
Vertical Align Images - Explained
Create amazing SEO 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!