Created
September 27, 2021 15:10
-
-
Save ThreePointSquare/78d115ff5a20f4cee3d5bc1c3193ae6a to your computer and use it in GitHub Desktop.
WebGL particle head
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as particulate from "https://cdn.skypack.dev/particulate@0.3.3"; | |
var site = site || {}; | |
site.window = $(window); | |
site.document = $(document); | |
site.Width = site.window.width(); | |
site.Height = site.window.height(); | |
var Background = function () {}; | |
Background.headparticle = function () { | |
if (!Modernizr.webgl) { | |
alert("Your browser dosent support WebGL"); | |
} | |
var camera, scene, renderer; | |
var mouseX = 0, | |
mouseY = 0; | |
var p; | |
var windowHalfX = site.Width / 2; | |
var windowHalfY = site.Height / 2; | |
Background.camera = new THREE.PerspectiveCamera( | |
35, | |
site.Width / site.Height, | |
1, | |
2000 | |
); | |
Background.camera.position.z = 300; | |
// scene | |
Background.scene = new THREE.Scene(); | |
// texture | |
var manager = new THREE.LoadingManager(); | |
manager.onProgress = function (item, loaded, total) { | |
//console.log('webgl, twice??'); | |
//console.log( item, loaded, total ); | |
}; | |
// particles | |
var p_geom = new THREE.Geometry(); | |
var p_material = new THREE.ParticleBasicMaterial({ | |
color: 0xffffff, | |
size: 1.5 | |
}); | |
// model | |
var loader = new THREE.OBJLoader(manager); | |
loader.load( | |
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/head.obj", | |
function (object) { | |
object.traverse(function (child) { | |
if (child instanceof THREE.Mesh) { | |
// child.material.map = texture; | |
var scale = 8; | |
$(child.geometry.vertices).each(function () { | |
p_geom.vertices.push( | |
new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale) | |
); | |
}); | |
} | |
}); | |
Background.scene.add(p); | |
} | |
); | |
p = new THREE.ParticleSystem(p_geom, p_material); | |
Background.renderer = new THREE.WebGLRenderer({ alpha: true }); | |
Background.renderer.setSize(site.Width, site.Height); | |
Background.renderer.setClearColor(0x000000, 0); | |
$(".particlehead").append(Background.renderer.domElement); | |
$(".particlehead").on("mousemove", onDocumentMouseMove); | |
site.window.on("resize", onWindowResize); | |
function onWindowResize() { | |
windowHalfX = site.Width / 2; | |
windowHalfY = site.Height / 2; | |
//console.log(windowHalfX); | |
Background.camera.aspect = site.Width / site.Height; | |
Background.camera.updateProjectionMatrix(); | |
Background.renderer.setSize(site.Width, site.Height); | |
} | |
function onDocumentMouseMove(event) { | |
mouseX = (event.clientX - windowHalfX) / 2; | |
mouseY = (event.clientY - windowHalfY) / 2; | |
} | |
Background.animate = function () { | |
Background.ticker = TweenMax.ticker; | |
Background.ticker.addEventListener("tick", Background.animate); | |
render(); | |
}; | |
function render() { | |
Background.camera.position.x += | |
(mouseX * 0.5 - Background.camera.position.x) * 0.05; | |
Background.camera.position.y += | |
(-(mouseY * 0.5) - Background.camera.position.y) * 0.05; | |
Background.camera.lookAt(Background.scene.position); | |
Background.renderer.render(Background.scene, Background.camera); | |
} | |
render(); | |
Background.animate(); | |
}; | |
Background.headparticle(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/OBJLoader.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.particlehead { | |
background: #abe1fd; | |
} | |
h1 { | |
font-size: 31px; | |
color: #202022; | |
font-family: Montserrat, sans-serif; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
text-transform: uppercase; | |
font-weight: normal; | |
margin-left: -264px; | |
margin-top: -20px; | |
pointer-events: none; | |
} | |
h1 strong { | |
font-weight: 700; | |
} | |
h1 em { | |
font-family: 'Playfair Display', serif; | |
text-transform: lowercase; | |
font-style: italic; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400italic" rel="stylesheet" /> |
WebGL particle head for a clients website. See the full result on fremtidenshoder.no. Made with three.js
A Pen by ThreePointSquare on CodePen.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment