WebGL Geometry Text

Developer
WebSonick
Size
5,406 Kb
Views
24,288
  1. WebGL Geometry Text Previews
  2. WebGL Geometry Text HTML Codes
  3. WebGL Geometry Text CSS Codes
  4. WebGL Geometry Text JS Codes

How do I make an webgl geometry text?

What is a webgl geometry text? How do you make a webgl geometry text? This script and codes were developed by WebSonick on 15 October 2022, Saturday.

WebGL Geometry Text Previews
IQ Test

WebGL Geometry Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Geometry Text</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<div id="info"> <span class="button" id="color">change color</span>,	<span class="button" id="font">change font</span>,	<span class="button" id="weight">change weight</span>,	<span class="button" id="bevel">change bevel</span>,	<span class="button" id="postprocessing">change postprocessing</span>,	<a id="permalink" href="#">permalink</a>	</div>	<script src="https://threejs.org/build/three.min.js"></script>	<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>	<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>	<script src="https://threejs.org/examples/js/shaders/FilmShader.js"></script>	<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/BloomPass.js"></script>	<script src="https://threejs.org/examples/js/postprocessing/FilmPass.js"></script>	<script src="https://threejs.org/examples/js/Detector.js"></script>	<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>	<!-- load the font files -->	<script src="https://threejs.org/examples/fonts/gentilis_bold.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/gentilis_regular.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/optimer_bold.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/optimer_regular.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/helvetiker_bold.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/helvetiker_regular.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/droid/droid_sans_regular.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/droid/droid_sans_bold.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/droid/droid_serif_regular.typeface.js"></script>	<script src="https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.js"></script>	<!-- todo async loader for fonts -->	<script>	</script>	</body>
</html> <script src="js/index.js"></script>
</body>
</html>

WebGL Geometry Text - Script Codes CSS Codes

body {	font-family: Monospace;	background-color: #000;	color: #fff;	margin: 0px;	overflow: hidden;	}	#info {	position: absolute;	top: 10px;	width: 100%;	text-align: center;	z-index: 100;	display:block;	}	#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }

WebGL Geometry Text - Script Codes JS Codes

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();	var container, stats, permalink, hex, color;	var camera, cameraTarget, scene, renderer;	var composer;	var effectFXAA;	var group, textMesh1, textMesh2, textGeo, material;	var firstLetter = true;	var text = "WebSonick",	height = 20,	size = 70,	hover = 30,	curveSegments = 4,	bevelThickness = 2,	bevelSize = 1.5,	bevelSegments = 3,	bevelEnabled = true,	font = "optimer", // helvetiker, optimer, gentilis, droid sans, droid serif	weight = "bold", // normal bold	style = "normal"; // normal italic	var mirror = true;	var fontMap = {	"helvetiker": 0,	"optimer": 1,	"gentilis": 2,	"droid sans": 3,	"droid serif": 4	};	var weightMap = {	"normal": 0,	"bold": 1	};	var reverseFontMap = {};	var reverseWeightMap = {};	for ( var i in fontMap ) reverseFontMap[ fontMap[i] ] = i;	for ( var i in weightMap ) reverseWeightMap[ weightMap[i] ] = i;	var targetRotation = 0;	var targetRotationOnMouseDown = 0;	var mouseX = 0;	var mouseXOnMouseDown = 0;	var windowHalfX = window.innerWidth / 2;	var windowHalfY = window.innerHeight / 2;	var postprocessing = { enabled : false };	var glow = 0.9;	init();	animate();	function capitalize( txt ) {	return txt.substring( 0, 1 ).toUpperCase() + txt.substring( 1 );	}	function decimalToHex( d ) {	var hex = Number( d ).toString( 16 );	hex = "000000".substr( 0, 6 - hex.length ) + hex;	return hex.toUpperCase();	}	function init() {	container = document.createElement( 'div' );	document.body.appendChild( container );	permalink = document.getElementById( "permalink" );	// CAMERA	camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );	camera.position.set( 0, 400, 700 );	cameraTarget = new THREE.Vector3( 0, 150, 0 );	// SCENE	scene = new THREE.Scene();	scene.fog = new THREE.Fog( 0x000000, 250, 1400 );	// LIGHTS	var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );	dirLight.position.set( 0, 0, 1 ).normalize();	scene.add( dirLight );	var pointLight = new THREE.PointLight( 0xffffff, 1.5 );	pointLight.position.set( 0, 100, 90 );	scene.add( pointLight );	//text = capitalize( font ) + " " + capitalize( weight );	//text = "abcdefghijklmnopqrstuvwxyz0123456789";	//text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";	// Get text from hash	var hash = document.location.hash.substr( 1 );	if ( hash.length !== 0 ) {	var colorhash = hash.substring( 0, 6 );	var fonthash = hash.substring( 6, 7 );	var weighthash = hash.substring( 7, 8 );	var pphash = hash.substring( 8, 9 );	var bevelhash = hash.substring( 9, 10 );	var texthash = hash.substring( 10 );	hex = colorhash;	pointLight.color.setHex( parseInt( colorhash, 16 ) );	font = reverseFontMap[ parseInt( fonthash ) ];	weight = reverseWeightMap[ parseInt( weighthash ) ];	postprocessing.enabled = parseInt( pphash );	bevelEnabled = parseInt( bevelhash );	text = decodeURI( texthash );	updatePermalink();	} else {	pointLight.color.setHSL( Math.random(), 1, 0.5 );	hex = decimalToHex( pointLight.color.getHex() );	}	material = new THREE.MeshFaceMaterial( [	new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), // front	new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ) // side	] );	group = new THREE.Object3D();	group.position.y = 100;	scene.add( group );	createText();	var plane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000 ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } ) );	plane.position.y = 100;	plane.rotation.x = - Math.PI / 2;	scene.add( plane );	// RENDERER	renderer = new THREE.WebGLRenderer( { antialias: true } );	renderer.setSize( window.innerWidth, window.innerHeight );	renderer.setClearColor( scene.fog.color, 1 );	container.appendChild( renderer.domElement );	// STATS	stats = new Stats();	stats.domElement.style.position = 'absolute';	stats.domElement.style.top = '0px';	//container.appendChild( stats.domElement );	// EVENTS	document.addEventListener( 'mousedown', onDocumentMouseDown, false );	document.addEventListener( 'touchstart', onDocumentTouchStart, false );	document.addEventListener( 'touchmove', onDocumentTouchMove, false );	document.addEventListener( 'keypress', onDocumentKeyPress, false );	document.addEventListener( 'keydown', onDocumentKeyDown, false );	document.getElementById( "color" ).addEventListener( 'click', function() {	pointLight.color.setHSL( Math.random(), 1, 0.5 );	hex = decimalToHex( pointLight.color.getHex() );	updatePermalink();	}, false );	document.getElementById( "font" ).addEventListener( 'click', function() {	if ( font == "helvetiker" ) {	font = "optimer";	} else if ( font == "optimer" ) {	font = "gentilis";	} else if ( font == "gentilis" ) {	font = "droid sans";	} else if ( font == "droid sans" ) {	font = "droid serif";	} else {	font = "helvetiker";	}	refreshText();	}, false );	document.getElementById( "weight" ).addEventListener( 'click', function() {	if ( weight == "bold" ) {	weight = "normal";	} else {	weight = "bold";	}	refreshText();	}, false );	document.getElementById( "bevel" ).addEventListener( 'click', function() {	bevelEnabled = !bevelEnabled;	refreshText();	}, false );	document.getElementById( "postprocessing" ).addEventListener( 'click', function() {	postprocessing.enabled = !postprocessing.enabled;	updatePermalink();	}, false );	// POSTPROCESSING	renderer.autoClear = false;	var renderModel = new THREE.RenderPass( scene, camera );	var effectBloom = new THREE.BloomPass( 0.25 );	var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );	effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );	var width = window.innerWidth || 2;	var height = window.innerHeight || 2;	effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );	effectFilm.renderToScreen = true;	composer = new THREE.EffectComposer( renderer );	composer.addPass( renderModel );	composer.addPass( effectFXAA );	composer.addPass( effectBloom );	composer.addPass( effectFilm );	//	window.addEventListener( 'resize', onWindowResize, false );	}	function onWindowResize() {	windowHalfX = window.innerWidth / 2;	windowHalfY = window.innerHeight / 2;	camera.aspect = window.innerWidth / window.innerHeight;	camera.updateProjectionMatrix();	renderer.setSize( window.innerWidth, window.innerHeight );	composer.reset();	effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );	}	//	function boolToNum( b ) {	return b ? 1 : 0;	}	function updatePermalink() {	var link = hex + fontMap[ font ] + weightMap[ weight ] + boolToNum( postprocessing.enabled ) + boolToNum( bevelEnabled ) + "#" + encodeURI( text );	permalink.href = "#" + link;	window.location.hash = link;	}	function onDocumentKeyDown( event ) {	if ( firstLetter ) {	firstLetter = false;	text = "";	}	var keyCode = event.keyCode;	// backspace	if ( keyCode == 8 ) {	event.preventDefault();	text = text.substring( 0, text.length - 1 );	refreshText();	return false;	}	}	function onDocumentKeyPress( event ) {	var keyCode = event.which;	// backspace	if ( keyCode == 8 ) {	event.preventDefault();	} else {	var ch = String.fromCharCode( keyCode );	text += ch;	refreshText();	}	}	function createText() {	textGeo = new THREE.TextGeometry( text, {	size: size,	height: height,	curveSegments: curveSegments,	font: font,	weight: weight,	style: style,	bevelThickness: bevelThickness,	bevelSize: bevelSize,	bevelEnabled: bevelEnabled,	material: 0,	extrudeMaterial: 1	});	textGeo.computeBoundingBox();	textGeo.computeVertexNormals();	// "fix" side normals by removing z-component of normals for side faces	// (this doesn't work well for beveled geometry as then we lose nice curvature around z-axis)	if ( ! bevelEnabled ) {	var triangleAreaHeuristics = 0.1 * ( height * size );	for ( var i = 0; i < textGeo.faces.length; i ++ ) {	var face = textGeo.faces[ i ];	if ( face.materialIndex == 1 ) {	for ( var j = 0; j < face.vertexNormals.length; j ++ ) {	face.vertexNormals[ j ].z = 0;	face.vertexNormals[ j ].normalize();	}	var va = textGeo.vertices[ face.a ];	var vb = textGeo.vertices[ face.b ];	var vc = textGeo.vertices[ face.c ];	var s = THREE.GeometryUtils.triangleArea( va, vb, vc );	if ( s > triangleAreaHeuristics ) {	for ( var j = 0; j < face.vertexNormals.length; j ++ ) {	face.vertexNormals[ j ].copy( face.normal );	}	}	}	}	}	var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );	textMesh1 = new THREE.Mesh( textGeo, material );	textMesh1.position.x = centerOffset;	textMesh1.position.y = hover;	textMesh1.position.z = 0;	textMesh1.rotation.x = 0;	textMesh1.rotation.y = Math.PI * 2;	group.add( textMesh1 );	if ( mirror ) {	textMesh2 = new THREE.Mesh( textGeo, material );	textMesh2.position.x = centerOffset;	textMesh2.position.y = -hover;	textMesh2.position.z = height;	textMesh2.rotation.x = Math.PI;	textMesh2.rotation.y = Math.PI * 2;	group.add( textMesh2 );	}	}	function refreshText() {	updatePermalink();	group.remove( textMesh1 );	if ( mirror ) group.remove( textMesh2 );	if ( !text ) return;	createText();	}	function onDocumentMouseDown( event ) {	event.preventDefault();	document.addEventListener( 'mousemove', onDocumentMouseMove, false );	document.addEventListener( 'mouseup', onDocumentMouseUp, false );	document.addEventListener( 'mouseout', onDocumentMouseOut, false );	mouseXOnMouseDown = event.clientX - windowHalfX;	targetRotationOnMouseDown = targetRotation;	}	function onDocumentMouseMove( event ) {	mouseX = event.clientX - windowHalfX;	targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;	}	function onDocumentMouseUp( event ) {	document.removeEventListener( 'mousemove', onDocumentMouseMove, false );	document.removeEventListener( 'mouseup', onDocumentMouseUp, false );	document.removeEventListener( 'mouseout', onDocumentMouseOut, false );	}	function onDocumentMouseOut( event ) {	document.removeEventListener( 'mousemove', onDocumentMouseMove, false );	document.removeEventListener( 'mouseup', onDocumentMouseUp, false );	document.removeEventListener( 'mouseout', onDocumentMouseOut, false );	}	function onDocumentTouchStart( event ) {	if ( event.touches.length == 1 ) {	event.preventDefault();	mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;	targetRotationOnMouseDown = targetRotation;	}	}	function onDocumentTouchMove( event ) {	if ( event.touches.length == 1 ) {	event.preventDefault();	mouseX = event.touches[ 0 ].pageX - windowHalfX;	targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;	}	}	//	function animate() {	requestAnimationFrame( animate );	render();	stats.update();	}	function render() {	group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;	camera.lookAt( cameraTarget );	renderer.clear();	if ( postprocessing.enabled ) {	composer.render( 0.05 );	} else {	renderer.render( scene, camera );	}	}
WebGL Geometry Text - Script Codes
WebGL Geometry Text - Script Codes
Home Page Home
Developer WebSonick
Username WebSonick
Uploaded October 15, 2022
Rating 3
Size 5,406 Kb
Views 24,288
Do you need developer help for WebGL Geometry Text?

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!

WebSonick (WebSonick) Script Codes
Name
CSS3 Menus
Login and Registration Form
CSS3 3D Books
Snow
Jump Animated Text
Rain JS
SpongeBob SquarePants CSS3
JQuery Sound Visualizer
CSS3 Text Effect
World Map Navigation
Create amazing captions 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!