Neon slicey cube

Developer
Eli Fitch
Size
5,020 Kb
Views
4,048
  1. Neon slicey cube Previews
  2. Neon slicey cube HTML Codes
  3. Neon slicey cube CSS Codes
  4. Neon slicey cube JS Codes

How do I make an neon slicey cube?

Inspired by https://twitter.com/bigblueboo/status/905056048859447296. What is a neon slicey cube? How do you make a neon slicey cube? This script and codes were developed by Eli Fitch on 17 January 2023, Tuesday.

Neon slicey cube Previews
IQ Test

Neon slicey cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Neon slicey cube</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> <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.20.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Neon slicey cube - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.container { height: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden;
}
body { background-size: cover; height: 100vh; width: 100vw; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAt0lEQVQYVwXBv07CQADA4d/1+icFrTRlYcKJUcPqTJyU8AYusLg54mbCM/AaPIaJkwsLi4kLaWAwFnrntXfn94nnm7UPEkWtK4pejKJBh5KynzN9feB984GY36+8MJ7MpWAajP3DRTGHrEtnPEId94jF7crrqwHYkjyGtBMQiIjfGn7OITJpEbPrpZ88PXL6/mL3uaVNFJaQ6LIg9oK0jhAvd2/eNjmBc+DO1EaRSonXF5hhjrIV/8SlRXbflbkFAAAAAElFTkSuQmCC");
}

Neon slicey cube - Script Codes JS Codes

'use strict';
var renderer = undefined;
var camera = undefined;
var controls = undefined;
var scene = undefined;
var NUM_SLICES = 40;
function init() { var container = document.getElementsByClassName('container')[0]; var w = container.offsetWidth; var h = container.offsetHeight; renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(w, h); // renderer.setClearColor(0xEFEFEF); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(15, w / h, 1, 1000); camera.position.set(7, 4, 0); camera.lookAt(scene.position); controls = new THREE.OrbitControls(camera, renderer.domElement); //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame) controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.3; var topLight = new THREE.DirectionalLight(0xFFFFFF, 1); var leftLight = new THREE.DirectionalLight(0xFFFFFF, 0.5); var rightLight = new THREE.DirectionalLight(0xFFFFFF, 0.5); var sideLightOffset = 0; topLight.position.set(0, 2, 0); leftLight.position.set(sideLightOffset, 0, 2); leftLight.lookAt(new THREE.Vector3(sideLightOffset, 0, 0)); rightLight.position.set(sideLightOffset, 0, -2); rightLight.lookAt(new THREE.Vector3(sideLightOffset, 0, 0)); var ambientLight = new THREE.AmbientLight(0x111111); scene.add(topLight); scene.add(leftLight); scene.add(rightLight); scene.add(ambientLight); scene.add(camera); render();
}
function render() { window.requestAnimationFrame(render); renderer.render(scene, camera); controls.update();
}
function slicedCube() { var container = new THREE.Object3D(); var slices = new Array(NUM_SLICES).fill(1).map(function (item, index) { item = new THREE.Mesh(new THREE.BoxGeometry(1 / NUM_SLICES, 1, 1), new THREE.MeshNormalMaterial(1, 1, 1) // new THREE.MeshLambertMaterial({ // color: 0xFAFAFA, // ambient: 0x222222 // }) ); item.position.set(index * (1 / NUM_SLICES) - (0.5 - 1 / NUM_SLICES / 2), 0, 0); container.add(item); return item; }); container.rotation.set(0, Math.PI / 4, 0); scene.add(container); rotateAnim(container); slicesAnim(slices);
}
function rotateAnim(object) { TweenMax.to(object.rotation, 4, { // y: Math.PI*2 + Math.PI/4, y: 3 * Math.PI / 4, repeat: -1, ease: Power0.easeNone });
}
function slicesAnim(slices) { var tl = new TimelineMax({ repeat: -1 }); var duration = 1; slices.forEach(function (slice, index) { tl.to(slice.rotation, 1, { x: index % 2 === 0 ? Math.PI / 2 : -Math.PI / 2, ease: Power2.easeInOut }, '-=0.99'); }); tl.duration(4).play();
}
init();
slicedCube();
window.addEventListener('resize', function () { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();
}, false);
Neon slicey cube - Script Codes
Neon slicey cube - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded January 17, 2023
Rating 4.5
Size 5,020 Kb
Views 4,048
Do you need developer help for Neon slicey cube?

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
Node DC Animated SVG Logo
Slanty Button Mixin
Animated multi-line underline
Goodbye 2016
Canvas Hero Prototype
Mars
Gradient Borders Mixin
Smiley guy
Vanilla JS sticky header
Create amazing sales emails 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!