Bump Mapping Three.js
How do I make an bump mapping three.js?
Font : http://www.dafont.com/egypt.font . What is a bump mapping three.js? How do you make a bump mapping three.js? This script and codes were developed by Sarah Cartwright on 05 December 2022, Monday.
Bump Mapping Three.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bump Mapping Three.js</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: gray;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Bump Mapping Three.js - Script Codes CSS Codes
body { background: gray;
}
Bump Mapping Three.js - Script Codes JS Codes
var container = document.getElementById( "container" );
var renderer = new THREE.WebGLRenderer( {antialias: true} );
var camera = new THREE.PerspectiveCamera( 50, 1.5, 0.1, 100000);
var scene = new THREE.Scene();
//camera (sky like the sun and //reflective greenhouse effect)
var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide
});
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
//Add the skybox (lights)
scene.add(skybox);
scene.add( camera );
renderer.setSize( 1100, 500 );
container.appendChild( renderer.domElement );
//////////////////////////////////////////////////////////
/* Textures */
THREE.crossOrigin = "";
var bmap = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33170/egyptian_friz_2.png", {}, function(){});
var smap = THREE.ImageUtils.loadTexture("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33170/specular_map.jpg", {}, function(){});
/* Camera Settings */
camera.position.z = 600;
camera.position.x = 15;
camera.position.y = 15;
camera.lookAt(new THREE.Vector3(0,0,0));
/* Lightening */
var light = new THREE.PointLight( new THREE.Color("rgb(255,70,3)"), 2.5);
var light2 = new THREE.PointLight( new THREE.Color("rgb(255,15,255)"), 4);
light.position.set( 0, -100, 1000 );
light2.position.set( 50, 50, 1000 );
/* Old Wall */
var oldMaterial = new THREE.MeshPhongMaterial({ color : new THREE.Color("rgb(155,196,30)"), emissive : new THREE.Color("rgb(0,0,0)"), specular : new THREE.Color("rgb(255,113,0)"), shininess : 20, bumpMap : bmap, map : smap, bumpScale : 0.45,
});
var oldWall = new THREE.Mesh( new THREE.PlaneGeometry(4000,400,32,8), oldMaterial );
/* Scene */
scene.add( oldWall );
scene.add ( light );
scene.add ( light2 );
/* Updating Scene */
var tmp = 0;
function update() { camera.lookAt(new THREE.Vector3(1000*Math.sin(tmp),0,0)); camera.position.x = 2000*Math.sin(tmp)/1.5; light.position.set(1000*Math.sin(tmp), 100*Math.sin(tmp), 500 ); light2.position.set(1000*Math.sin(tmp), 100*Math.cos(tmp), 500 ); tmp += 1/400;
}
/* Render */
function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); update();
}
render()
Developer | Sarah Cartwright |
Username | SarahC |
Uploaded | December 05, 2022 |
Rating | 3 |
Size | 2,570 Kb |
Views | 12,144 |
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 |
OLED Emulator - Vertical bytes | 7,111 Kb |
A Pen by Sarah Cartwright | 1,738 Kb |
Firework - Smoke types | 7,632 Kb |
3D Fireworks | 5,096 Kb |
Firework types | 3,349 Kb |
Kindle - Convert image to 4 shade E-ink | 4,747 Kb |
Tinted image renderer | 2,176 Kb |
Bullet time - Fireworks | 5,737 Kb |
Circuit Snakes | 5,087 Kb |
OLED Emulator - Sprites | 7,784 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 |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 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!