Kaleidoscope
How do I make an kaleidoscope?
A threejs kaleidoscope effect experiment. (best in fullscreen, some zoom is also supported for more variety, click to regenerate content). What is a kaleidoscope? How do you make a kaleidoscope? This script and codes were developed by XORXOR on 27 January 2023, Friday.
Kaleidoscope - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kaleidoscope</title>
</head>
<body> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>[-]</title> <style> body { margin: 0px; overflow: hidden; background-color: #FFB347; font-family: 'Arial'; } #help{ position: absolute; top: 1%; left: 1%; font-size: 20px; color: white; } </style> </head> <body> <div id="help">[Kaleidoscope - click to shuffle]</div> </body>
</html> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/OrbitControls.js'></script> <script src="js/index.js"></script>
</body>
</html>
Kaleidoscope - Script Codes JS Codes
//created by XORXOR, #codevember 2016
var contianer, renderer, camera, scene;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var cube;
var cubes = [];
var center;
var bufferScene = new THREE.Scene();
var bufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
var triangleGeometry
var triangle;
var clock = new THREE.Clock();
var delta =0;
var m;
var size;
var randomness = 0;
var rnd = 1;
init()
animate();
function init() { container = document.createElement('div'); document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 80, window.innerWidth/window.innerHeight, .1, 10000 ); scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); //geometry size = 100 var rot = Math.PI/3 m = Math.sqrt(size*size - Math.pow(size/2,2)) var r = size/2*Math.sin(Math.PI/3) triangle = new THREE.Shape([ new THREE.Vector2 (0, 0), new THREE.Vector2 (size/2,(size/2) / (1/Math.tan(rot))), new THREE.Vector2 (-size/2,(size/2) / (1/Math.tan(rot))) ]); triangleGeometry = new THREE.ShapeGeometry( triangle); triangleGeometry.computeFaceNormals(); triangleGeometry.faceVertexUvs[0][0][0] = new THREE.Vector2( 0, 0 ); triangleGeometry.faceVertexUvs[0][0][1] = new THREE.Vector2( 0, 1 ); triangleGeometry.faceVertexUvs[0][0][2] = new THREE.Vector2( 1, 1 ); triangleMirrored = new THREE.ShapeGeometry( triangle); triangleMirrored.computeFaceNormals(); triangleMirrored.faceVertexUvs[0][0][2] = new THREE.Vector2( 0, 0 ); triangleMirrored.faceVertexUvs[0][0][1] = new THREE.Vector2( 0, 1 ); triangleMirrored.faceVertexUvs[0][0][0] = new THREE.Vector2( 1, 1 ); var kaleidoscope = new THREE.Object3D(); var sides = 6 for (var i = 0; i < sides+1; i++) { if (i%2 == 0) { var mesh= new THREE.Mesh( triangleGeometry, new THREE.MeshBasicMaterial({map:bufferTexture.texture,side:THREE.DoubleSide}) ); } else { var mesh= new THREE.Mesh( triangleMirrored, new THREE.MeshBasicMaterial({map:bufferTexture.texture,side:THREE.DoubleSide}) ); } kaleidoscope.add(mesh) var rot = Math.PI/3*-i var x = size/2*Math.cos(rot) * i; var y = size/2*Math.sin(rot) * -i; mesh.rotation.set(0,0,rot); } scene.add(kaleidoscope) // kaleidoscope.rotation.set(0,0,-Math.PI/6) var allElems = new THREE.Object3D(); allElems.add(kaleidoscope) var copy = kaleidoscope.clone() copy.position.y = m; copy.position.x = size*1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*-1; copy.position.x = size*1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*-1; copy.position.x = size*-1.5 allElems.add(copy) var copy = kaleidoscope.clone() copy.position.y = m*1; copy.position.x = size*-1.5 allElems.add(copy) scene.add(allElems) allElems.rotation.set(0,0,Math.PI/6) camera.position.set(0,0,50) for (var i = 0; i < 500; i++) { var geometry = new THREE.BoxGeometry(Math.random()*5, Math.random()*5, Math.random()*5); var rand = Math.random() var material = new THREE.MeshStandardMaterial({color: 0xff0000,metalness:rand}); material.color.setHex( random(i) * 0xffffff ) material.depthTest = false cube = new THREE.Mesh(geometry, material); bufferScene.add(cube) cube.position.set((Math.random()-.5)*size,(Math.random()-.5)*size,(Math.random()-.5)*size) cube.rotation.set(0,Math.random()*Math.PI,Math.random()*Math.PI) cubes.push(cube) } //light var ambient = new THREE.AmbientLight( 0xffffff ); bufferScene.add(ambient); light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2 ); light.position.set( 600, 1500, 1000 ); light.target.position.set( 0, 0, 0 ); bufferScene.add(light) controls = new THREE.OrbitControls(camera, renderer.domElement); controls.maxDistance = 70; controls.minDistance = 45 controls.enableDamping = true; controls.enablePan = false; controls.enableRotate = false controls.dampingFactor = .999; window.addEventListener('resize', onWindowResize, false); window.addEventListener( 'mousedown', randomize );
}
function randomize(){ randomness = Math.floor(time); rnd = (Math.random()-.5)*2;
}
function moveContent(time){ var t = time*.2 delta = clock.getDelta() for (var i = 0; i < cubes.length; i++) { if (randomness%2 == 0) { cubes[i].position.x = rnd* random(i+randomness)*Math.sin(t+i)*size +.1; } if (randomness%2 == 1) { cubes[i].position.y = random(i*randomness)*Math.cos(t+i)*size; } cubes[i].rotation.set(random(i+randomness)+t,random(i+randomness)+t,random(i+randomness)+t,random(i+randomness)+t); cubes[i].material.color.offsetHSL(delta/10,0,0) }
}
var time = 0;
function animate() { time = performance.now() * 0.001; moveContent(time); renderer.render(bufferScene,camera,bufferTexture); controls.update() requestAnimationFrame(animate); renderer.render(scene, camera);
}
function random(seed) { var x = Math.sin(seed) * 10000; return x - Math.floor(x);
}
radians = function(degrees) { return degrees * Math.PI / 180;
};
function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );
}
Developer | XORXOR |
Username | xorxor_hu |
Uploaded | January 27, 2023 |
Rating | 4 |
Size | 3,536 Kb |
Views | 4,048 |
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 |
Kaleidoscope | 3,536 Kb |
Cubic Tunnel | 4,791 Kb |
Grid of Birds | 3,512 Kb |
Pipes | 3,300 Kb |
Morphing Tubes | 3,406 Kb |
Complex Form with Black and White Bands | 3,209 Kb |
2050 | 3,612 Kb |
The Walking Raymarcher | 7,934 Kb |
Pastel Pump | 3,763 Kb |
Complex Form with Black and White Spirals | 3,340 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 |
Countdown Timer | Massiebn | 3,001 Kb |
React Template | Isac | 1,241 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
CircleType | Peterhry | 3,535 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Subtle site navigation with description | Necks | 3,206 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!