WebGL Minimalism

Developer
Size
2,940 Kb
Views
54,648

How do I make an webgl minimalism?

Built with the THREE.js framework, this was a first time dabble for me into the awesome (and slightly intimidating) realm of WebGL.. What is a webgl minimalism? How do you make a webgl minimalism? This script and codes were developed by John Urbank on 07 July 2022, Thursday.

WebGL Minimalism Previews

WebGL Minimalism - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Minimalism</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ html,
body { width: 100%; height: 100%; position: relative;
}
canvas { position: relative;
}
#circle { border-radius: 50%; background: #000; position: absolute; top: 50%; left: 50%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="circle"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://threejsplaygnd.brangerbriz.net/js/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL Minimalism - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; position: relative;
}
canvas { position: relative;
}
#circle { border-radius: 50%; background: #000; position: absolute; top: 50%; left: 50%;
}

WebGL Minimalism - Script Codes JS Codes

// environment
var camera, scene, renderer, canvas, W = window.innerWidth, H = window.innerHeight, bgColor = "#4421f4", fgColor = "#e54242", lineWidth = 5;
// object
var geometry, material, mesh;
function setup() { // env camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 ); camera.position.z = 500; scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer(); renderer.setSize( W, H ); document.body.appendChild( renderer.domElement ); // onload, let's center the circle here rather than use % to prevent skewing window.onload = function() { var circle = document.getElementById('circle'), circleSze = W/1.5 && H/1.5; circle.setAttribute("style", "margin-top: -" + circleSze/2 + "px; margin-left: -" + circleSze/2 + "px; width:" + circleSze + "px; height: " + circleSze + "px; background:" + fgColor); document.body.style.background = bgColor; }
}
function draw() { // repaint canvas requestAnimationFrame(draw); shapeMotion(); renderer.render(scene, camera);
}
function shapeMotion() { mesh.scale.x = mesh.scale.y = mesh.scale.z = 2; mesh.rotation.x = Math.PI * Date.now() * 0.00005; mesh.rotation.y = Math.PI * Date.now() * 0.00005;
}
function custShape() { function randomRange(min, max) { return Math.floor(Math.random() * (max - min) + min); } var points = []; for(var i = 0; i<1000; i++) { var sz = 100, x = randomRange(-sz, sz), y = randomRange(-sz, sz), z = randomRange(-sz, sz); points.push(new THREE.Vector3(x, y, z)); } geometry = new THREE.ConvexGeometry( points ); material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, wireframe: true, wireframeLinewidth:lineWidth, color: bgColor}); mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
};
setup();
custShape();
draw();
// at specific points, resize/center the polygon
window.onresize = function() { renderer.domElement.style.width = "100%"; renderer.domElement.style.height = "100%";
}
WebGL Minimalism - Script Codes
WebGL Minimalism - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 07, 2022
Rating 4
Size 2,940 Kb
Views 54,648
Do you need developer help for WebGL Minimalism?

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!

John Urbank (jurbank) Script Codes
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!