Three.js Shader Fun

Developer
Kevin Alford
Size
3,196 Kb
Views
6,072
  1. Three.js Shader Fun Previews
  2. Three.js Shader Fun HTML Codes
  3. Three.js Shader Fun CSS Codes
  4. Three.js Shader Fun JS Codes

How do I make an three.js shader fun?

Having more fun with Three.js <3. What is a three.js shader fun? How do you make a three.js shader fun? This script and codes were developed by Kevin Alford on 07 January 2023, Saturday.

Three.js Shader Fun Previews
IQ Test

Three.js Shader Fun - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Three.js Shader Fun</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> <script type="text/javascript" src="https://googledrive.com/host/0B-4noyqAgbqCTkhZRzN6ejJhM2s"></script>	<!-- Shaders -->	<script type="x-shader/x-vertex" id="vertex_shader">	// switch on high precision floats	#ifdef GL_ES	precision highp float;	#endif varying vec3 vNormal;	void main()	{ vNormal = normal;	gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);	}	</script> <script type="x-shader/x-fragment" id="fragment_shader">	#ifdef GL_ES	precision highp float;	#endif uniform float time; uniform float scaler; varying vec3 vNormal;	void main()	{ // calc the dot product and clamp // 0 -> 1 rather than -1 -> 1 vec3 light = vec3(0.5,0.2,1.0); // ensure it's normalized light = normalize(light); // calculate the dot product of // the light to the vertex normal float dProd = max(0.0, dot(vNormal, light)); gl_FragColor = vec4( sin(gl_FragCoord.x*gl_FragCoord.x*scaler + time)*dProd, sin(gl_FragCoord.y*gl_FragCoord.x*scaler + time)*dProd, sin(gl_FragCoord.y*gl_FragCoord.x*scaler + time)*dProd, 1.0);	} </script>	<!-- End Shaders --> <div id='container'></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Three.js Shader Fun - Script Codes CSS Codes

body
{ background-color: #555753;
}

Three.js Shader Fun - Script Codes JS Codes

$(document).ready(function () { // Dimension Settings var width = window.innerWidth, height = window.innerHeight; var angle = 45, aspect = width/height, near = 0.1, far = 10000; var adjustables = { coarse_value: 3.2, fine_value: 0.0, time_step: 0.1 } // Uniforms for fragment shader var uniforms = { time: { type: 'f', // a float value: 0 }, scaler: { type: 'f', value: adjustables.coarse_value + adjustables.fine_value // 3.2, 1.0 } }; // Woorld Objects var renderer = new THREE.WebGLRenderer(); var camera = new THREE.PerspectiveCamera(angle, aspect, near, far); var scene = new THREE.Scene(); var light = new THREE.SpotLight(0xFFFFFF, 1); var vertex_shader = $('#vertex_shader'); var fragment_shader = $('#fragment_shader'); var material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertex_shader.text(), fragmentShader: fragment_shader.text() }); var radius = 20, segments = 32, rings = 32; var geometry = new THREE.SphereGeometry(radius, segments, rings); var sphere = new THREE.Mesh(geometry, material); // Positions light.position.x = 0; light.position.y = 100; light.position.z = 0; light.lookAt(sphere.position); camera.position.z = 40; camera.position.y = 40; camera.lookAt(sphere.position); // Build World scene.add(camera); scene.add(light); scene.add(sphere); // Shadow renderer.shadowMapEnabled = true; light.castShadow = true; light.shadowCameraNear = 1.0; light.shadowDarkness = 0.5; sphere.castShadow = true; sphere.receiveShadow = true; var gui_settings = { "preset": "electrowaves", "remembered": { "griddy": { "0": { "coarse_value": 2.1, "fine_value": 0 } }, "electrowaves": { "0": { "coarse_value": 0, "fine_value": 0.0325 } } }, "closed": false, "folders": {}
} // GUI var gui = new dat.GUI({load: gui_settings}); gui.remember(adjustables); gui.add(adjustables, 'coarse_value').min(0).max(4).step(0.1); gui.add(adjustables, 'fine_value').min(0.0).max(0.1).step(0.0001); // deal with resizes // Render $('#container').append(renderer.domElement); renderer.setSize(width, height); // Update Method var pen = this; var update = function() { uniforms.time.value += adjustables.time_step; uniforms.scaler.value = adjustables.coarse_value + adjustables.fine_value; }; // Browser Animation Loop var animate = function() { update(); renderer.render(scene, camera); requestAnimationFrame( animate ); }; animate();
});
Three.js Shader Fun - Script Codes
Three.js Shader Fun - Script Codes
Home Page Home
Developer Kevin Alford
Username zeroeth
Uploaded January 07, 2023
Rating 3
Size 3,196 Kb
Views 6,072
Do you need developer help for Three.js Shader Fun?

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!

Kevin Alford (zeroeth) Script Codes
Name
CARROT
A CSS trifold valentines.
Refresh on html.
Marqueeception
Simple responsive 2 col
Css text wave
Angle Border
Browser language
How not to code a website
Please Enter a Value
Create amazing Facebook ads 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!