3D Retro Wave Spin

Developer
Eli Fitch
Size
5,825 Kb
Views
34,408
  1. 3D Retro Wave Spin Previews
  2. 3D Retro Wave Spin HTML Codes
  3. 3D Retro Wave Spin CSS Codes
  4. 3D Retro Wave Spin JS Codes

How do I make an 3d retro wave spin?

What is a 3d retro wave spin? How do you make a 3d retro wave spin? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

3D Retro Wave Spin Previews
IQ Test

3D Retro Wave Spin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Retro Wave Spin</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> <div class="container"> <div class="vignette"></div> <div class="controls"> <button class="js-view-button" data-view="front">View Front</button> <button class="js-view-button" data-view="top">View Top</button> <button class="js-view-button" data-view="bottom">View Bottom</button> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.3/dat.gui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

3D Retro Wave Spin - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.container { height: 100vh; width: 100%; position: relative;
}
.container canvas { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1;
}
.vignette { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%); background-image: radial-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%); pointer-events: none;
}
.controls { position: absolute; top: 0; left: 0; z-index: 3; padding: 1rem;
}
.controls button { -webkit-appearance: none; border: none; outline: none; padding: 1rem; margin-right: 1rem; margin-bottom: 1rem; background-image: -webkit-linear-gradient(45deg, #7A80FF, #B380F4); background-image: linear-gradient(45deg, #7A80FF, #B380F4); color: #fafafa; letter-spacing: 0.1rem; text-transform: uppercase; cursor: pointer;
}
.dg.ac { z-index: 100 !important;
}

3D Retro Wave Spin - Script Codes JS Codes

'use strict';
var container = document.getElementsByClassName('container')[0];
var orthoFactor = 2;
var params = { STRETCH_FACTOR: 10, AMPLITUDE_FACTOR: 1, SPEED_FACTOR: 2, LAYERS: 100
};
var viewButtons = document.querySelectorAll('.js-view-button');
var renderer = undefined;
var camera = undefined;
var controls = undefined;
var scene = undefined;
function init() { var w = container.offsetWidth; var h = container.offsetHeight; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(w, h); renderer.setClearColor(0xEFEFEF); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); scene = new THREE.Scene(); var cameraLeft = w / -orthoFactor; var cameraRight = w / orthoFactor; var cameraTop = h / orthoFactor; var cameraBottom = h / -orthoFactor; camera = new THREE.OrthographicCamera(cameraLeft, cameraRight, cameraTop, cameraBottom, 1, 100); camera.position.set(10, 0, 0); camera.lookAt(scene.position); controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.3; var hemilight = new THREE.HemisphereLight(0xFFFFFF, 0xFAFAFA, 2); scene.add(hemilight); scene.add(camera); createMeshTornado(scene, params, camera); console.log('render'); render();
}
function render() { window.requestAnimationFrame(render); renderer.render(scene, camera); controls.update();
}
function createMeshTornado(scene, params, camera) { var amplitude = params.AMPLITUDE_FACTOR * params.LAYERS; var stretch = params.LAYERS / params.STRETCH_FACTOR; var mat = new THREE.MeshNormalMaterial(); var baseSize = { x: 0.5, y: 0.1, z: 0.5 }; var basePosition = { x: 0.0, y: 0.0, z: 0.0 }; var containerObj = new THREE.Object3D(); containerObj.name = 'mario'; // containerObj.position.set(0, -(params.LAYERS*baseSize.y/2), 0); for (var i = 0; i < params.LAYERS + 0; i++) { var oscillator = (1 - Math.cos(2 * Math.PI * (i / amplitude))) / stretch; var x = baseSize.x * i * oscillator; var y = baseSize.y; var z = baseSize.z * i * oscillator; var geo = new THREE.BoxGeometry(x, y, z); var box = new THREE.Mesh(geo, mat); box.position.set(0, y * i, 0); TweenMax.to(box.rotation, params.LAYERS / params.SPEED_FACTOR / i, { y: Math.PI, repeat: -1, ease: Power0.easeNone }); containerObj.add(box); } scene.add(containerObj); //For centering the meshGroup var viewBox = new THREE.Box3().setFromObject(containerObj); viewBox.center(containerObj.position); containerObj.localToWorld(viewBox); containerObj.position.multiplyScalar(-1); //For fitting the object to the screen when using orthographic camera camera.zoom = Math.min(container.offsetWidth / (viewBox.max.x - viewBox.min.x), container.offsetHeight / (viewBox.max.y - viewBox.min.y)) * 0.8; camera.updateProjectionMatrix(); camera.updateMatrix();
}
function makeGui() { var gui = new dat.GUI(); var layers = gui.add(params, 'LAYERS', 10, 200); var stretch = gui.add(params, 'STRETCH_FACTOR', 2, 20); var amp = gui.add(params, 'AMPLITUDE_FACTOR', 0.5, 2); var speed = gui.add(params, 'SPEED_FACTOR', 0.5, 10); function handleOnChange(val) { scene.remove(scene.getObjectByName('mario')); scene.add(createMeshTornado(scene, params, camera)); } layers.onFinishChange(handleOnChange); stretch.onFinishChange(handleOnChange); amp.onFinishChange(handleOnChange); speed.onFinishChange(handleOnChange);
}
function handleViewButtonClick(e) { if (e.target.getAttribute('data-view') === "front") { camera.position.set(10, 0, 0); } else if (e.target.getAttribute('data-view') === "top") { camera.position.set(10, 15, 0); } else if (e.target.getAttribute('data-view') === "bottom") { camera.position.set(10, -15, 0); }
}
init();
makeGui();
window.addEventListener('resize', function () { renderer.setSize(window.innerWidth, window.innerHeight); var w = container.offsetWidth; var h = container.offsetHeight; camera.left = w / -orthoFactor; camera.right = w / orthoFactor; camera.top = h / orthoFactor; camera.bottom = h / -orthoFactor; camera.updateProjectionMatrix();
}, false);
_.forEach(viewButtons, function (el) { el.addEventListener('click', handleViewButtonClick);
});
3D Retro Wave Spin - Script Codes
3D Retro Wave Spin - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4.5
Size 5,825 Kb
Views 34,408
Do you need developer help for 3D Retro Wave Spin?

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!

Eli Fitch (elifitch) Script Codes
Name
Flexslider thumbnail modification
Smiley guy
Batman Middle Finger
SVG hamburger menu button
Cube of cubes
Slanty Button Mixin
Gradient Borders Mixin
Mars
Node DC Animated SVG Logo
Vanilla JS sticky header
Create amazing art & images 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!