Three.js Planetoid
How do I make an three.js planetoid?
What is a three.js planetoid? How do you make a three.js planetoid? This script and codes were developed by Moses Holmström on 20 August 2022, Saturday.
Three.js Planetoid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three.js Planetoid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <script src='https://rawgit.com/mrdoob/three.js/dev/build/three.min.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/modifiers/SubdivisionModifier.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/LuminosityHighPassShader.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/shaders/ConvolutionShader.js'></script>
<script src='https://rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/UnrealBloomPass.js'></script> <script src="js/index.js"></script>
</body>
</html>
Three.js Planetoid - Script Codes JS Codes
console.clear();
THREE.RGBShiftShader = { uniforms: { "tDiffuse": { value: null }, "amount": { value: 0.05 }, "angle": { value: .5 } }, vertexShader: [ "varying vec2 vUv;", "void main() {", "vUv = uv;", "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", "}" ].join( "\n" ), fragmentShader: [ "uniform sampler2D tDiffuse;", "uniform float amount;", "uniform float angle;", "varying vec2 vUv;", "void main() {", "vec2 offset = amount * vec2( cos(angle), sin(angle));", "vec4 cr = texture2D(tDiffuse, vUv + offset);", "vec4 cga = texture2D(tDiffuse, vUv);", "vec4 cb = texture2D(tDiffuse, vUv - offset);", "gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);", "}" ].join( "\n" )
};
var FOV = 2;
var RES = 6;
var BGCOLOR = 0x7070C0;
var PI = Math.PI;
var TAU = PI * 2;
var sin = Math.sin;
var cos = Math.cos;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(BGCOLOR));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
var ratio = window.innerWidth/window.innerHeight;
var camera = new THREE.PerspectiveCamera(FOV, ratio, 1, 500);
camera.position.z = 50;
camera.position.y = 20;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( BGCOLOR, .01
);
var geometry = new THREE.BoxGeometry(1, 1, 1, RES, RES, RES);
var subdiv = new THREE.SubdivisionModifier(1);
for(var index in geometry.vertices) { var vert = geometry.vertices[index]; vert.normalize().multiplyScalar(.5); vert.x += (Math.random() * 2 - 1) / 25; vert.y += (Math.random() * 2 - 1) / 25; vert.z += (Math.random() * 2 - 1) / 25;
}
subdiv.modify(geometry);
for(var index in geometry.vertices) { var vert = geometry.vertices[index]; vert.x += (Math.random() * 2 - 1) / 50; vert.y += (Math.random() * 2 - 1) / 50; vert.z += (Math.random() * 2 - 1) / 50;
}
subdiv.modify(geometry);
for(var index in geometry.vertices) { var vert = geometry.vertices[index]; vert.x += (Math.random() * 2 - 1) / 75; vert.y += (Math.random() * 2 - 1) / 75; vert.z += (Math.random() * 2 - 1) / 75;
}
subdiv.modify(geometry);
geometry.mergeVertices();
computeVertexNormals(geometry);
function computeVertexNormals(geometry) { geometry.computeFaceNormals(); for (var f = 0; f < geometry.faces.length; f++) { var face = geometry.faces[f]; face.vertexNormals[0] = geometry.vertices[face.a].clone().normalize(); face.vertexNormals[1] = geometry.vertices[face.b].clone().normalize(); face.vertexNormals[2] = geometry.vertices[face.c].clone().normalize(); }
}
var material = new THREE.MeshPhongMaterial({ color: 0x8899CC, specular: 0x888888, wireframe: false, shininess: 10, shading: THREE.FlatShading, fog: true
});
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
var lightsPos = new THREE.Vector3(15, -5, 10);
var fillLight = new THREE.DirectionalLight(0xAACCFF, .25);
fillLight.position.set(lightsPos.x, lightsPos.y, lightsPos.z);
fillLight.castShadow = true;
fillLight.shadow.mapSize.width = 2048;
fillLight.shadow.mapSize.height = 2048;
fillLight.shadow.camera.near = 1;
fillLight.shadow.camera.far = 100;
scene.add(fillLight);
var rimLight = new THREE.DirectionalLight(0xFFBB88, 1.75);
rimLight.position.set(-lightsPos.x, -lightsPos.y, -lightsPos.z);
rimLight.castShadow = true;
rimLight.shadow.mapSize.width = 2048;
rimLight.shadow.mapSize.height = 2048;
rimLight.shadow.camera.near = 1;
rimLight.shadow.camera.far = 100;
scene.add(rimLight);
var ambient = new THREE.AmbientLight(BGCOLOR, .128);
scene.add(ambient);
var lastTime = 0;
var composer = new THREE.EffectComposer( renderer );
var renderPass = new THREE.RenderPass( scene, camera );
var rgbShiftPass = new THREE.ShaderPass(THREE.RGBShiftShader);
rgbShiftPass.uniforms['amount'].value = 0.002;
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.33, .0848, 0.95 // strength, radius, threshold
);
var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;
composer.addPass(renderPass);
composer.addPass(rgbShiftPass);
composer.addPass(bloomPass);
composer.addPass(copyShader);
function animate(time) { var dt = time - lastTime; lastTime = time; cube.rotation.y += dt / 1000; composer.render(scene, camera); requestAnimationFrame(animate);
}
animate(0);
var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
var windowHeight = window.innerHeight;
function onWindowResize( event ) { camera.aspect = window.innerWidth / window.innerHeight; camera.fov = ( 360 / Math.PI ) * Math.atan( tanFOV * ( window.innerHeight / windowHeight ) ); camera.updateProjectionMatrix(); camera.lookAt( scene.position ); renderer.setSize( window.innerWidth, window.innerHeight ); composer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );
Developer | Moses Holmström |
Username | thykka |
Uploaded | August 20, 2022 |
Rating | 4.5 |
Size | 3,284 Kb |
Views | 46,552 |
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 |
Random word highlight script | 3,578 Kb |
Rotary control with value display | 3,750 Kb |
Eclipse | 209,811 Kb |
Flickering ANSI logo | 3,869 Kb |
Rotating ASCII Globe | 17,424 Kb |
Firework | 3,489 Kb |
Animated Unlock Tutorial | 6,703 Kb |
Status Monitor mockup | 7,599 Kb |
Pagination indicators | 3,263 Kb |
Brainbow Menu | 3,767 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 |
Prism | Pyrografix | 2,843 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Twitch API | Coderpilot | 3,412 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 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!