A three js plane animated by modifing their z vertices
A Pen by Nahuel Veron on CodePen.
Created
June 30, 2021 13:53
-
-
Save spicecoder/b028f10ab28a4ae2f9ffded7feb0d599 to your computer and use it in GitHub Desktop.
ThreeJS plane wave
This file contains hidden or 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
| <div id="container"></div> |
This file contains hidden or 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
| var container = document.getElementById('container') | |
| var vertexHeight = 15000, | |
| planeDefinition = 100, | |
| planeSize = 1245000, | |
| totalObjects = 1, | |
| background = "#002135", | |
| meshColor = "#005e97"; | |
| var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 400000) | |
| camera.position.z = 10000; | |
| camera.position.y = 10000; | |
| var scene = new THREE.Scene(); | |
| scene.fog = new THREE.Fog(background, 1, 300000); | |
| var planeGeo = new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition); | |
| var plane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ | |
| color: meshColor, | |
| wireframe: true | |
| })); | |
| plane.rotation.x -= Math.PI * .5; | |
| scene.add(plane); | |
| var renderer = new THREE.WebGLRenderer({alpha: false}); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| renderer.setClearColor(background, 1); | |
| container.appendChild(renderer.domElement); | |
| updatePlane(); | |
| function updatePlane() { | |
| for (var i = 0; i < planeGeo.vertices.length; i++) { | |
| planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight; | |
| planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z | |
| } | |
| }; | |
| render(); | |
| var count = 0 | |
| function render() { | |
| requestAnimationFrame(render); | |
| // camera.position.z -= 150; | |
| var x = camera.position.x; | |
| var z = camera.position.z; | |
| camera.position.x = x * Math.cos(0.001) + z * Math.sin(0.001) - 10; | |
| camera.position.z = z * Math.cos(0.001) - x * Math.sin(0.001) - 10; | |
| camera.lookAt(new THREE.Vector3(0, 8000, 0)) | |
| for (var i = 0; i < planeGeo.vertices.length; i++) { | |
| var z = +planeGeo.vertices[i].z; | |
| planeGeo.vertices[i].z = Math.sin(( i + count * 0.00002)) * (planeGeo.vertices[i]._myZ - (planeGeo.vertices[i]._myZ* 0.6)) | |
| plane.geometry.verticesNeedUpdate = true; | |
| count += 0.1 | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| window.addEventListener('resize', onWindowResize, false); | |
| function onWindowResize() { | |
| //changes the size of the canavs and updates it | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } |
This file contains hidden or 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/three.js/88/three.min.js"></script> |
This file contains hidden or 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
| #container { | |
| height: 100vh; | |
| width: 100%; | |
| overflow: hidden; | |
| overflow-y: hidden; | |
| filter: grayscale(90%); | |
| } | |
| /* Codepen does some weird shit */ | |
| html, body { | |
| border: 0; | |
| padding: 0; | |
| margin: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment