Waves Example Three.js
This is a really fun and exciting code to demonstrate the awesome abilities of Three.js
* Featured Code Created By Rull Deef
HTML
<!DOCTYPE html>
<html>
<head>
<title>Waves example based on three.js lib</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js'>
</script>
</head>
<body>
<span>change z component of each vertex<br/>
to see wave animation<br/>
x, y, z - current components<br/>
t - time value (very big, use in trig. funcs<br/>
to animate waves)<br/>
pi, e - constants<br/>
sqrt, sin, cos, abs, log - std. functions<br/>
d - distance from center (=sqrt(x*x+y*y))
</span>
<button onclick='random()'>random</button>
<input value='z = 1/log(2+sqrt(d))*cos(d-t)'>
<!-- mouse:
z = 1/log(2+sqrt(d))*cos(abs(d-2)-abs(x+y)-t)
-->
</body>
</html>
CSS
body {
position: fixed;
margin: 0;
}
span {
position: fixed;
font-size: 10px;
font-weight: 1;
color: orange;
}
button {
position: fixed;
right: 5%; top: 5%;
}
input {
position: fixed;
bottom: 5%;
left: 12.5%;
width: 75%;
}
JavaScript
var waveList = [
'z = sin(t)+sin(x-2*t)+cos(y+t)',
'z = 1/log(2+sqrt(d))*cos(d-t)',
'z = 1/log(2+sqrt(d))*cos(abs(d-2)-abs(x+y)-t)',
/* Morpheus */
'z = 6/log(sqrt(d))*cos(d-t)',
/* Jingga Sona */
'z = 1/log(+sqrt(d))*cos(d-x-y-z-t)',
'z = 1/log(1+sqrt(d))*cos(d-t)',
'z = cos(d - z-y- y+t) + (y / 3)',
/* Rowsej */
'z = cos(d - t) + (y / 3)',
'z = d < 1? 10 : (d < 2? 9 : (d < 3? 8 : (d < 4? 7 : (d < 5? 6 : (d < 6? 5 : (d < 7? 4 : (d < 8? 3 : (d < 9? 2 : (d < 10? 1 : 0))))))))) + cos(d - t)',
/* Paul Caron */
'z = 1*x%y/log(2+sqrt(d))*cos(d-t)',
];
function random() {
let i = ~~(Math.random()*waveList.length);
document.getElementsByTagName('input')[0].
value = waveList[i];
}
window.onload = function() {
var W = window.innerWidth, H = window.innerHeight;
console.log = () => {}
// initializing three core components
var renderer = new THREE.WebGLRenderer;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(W, H);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera
(75, W/H, 0.1, 1000);
camera.position.set(0, -14, 14);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var scene = new THREE.Scene;
// called each frame
function mainloop() {
window.requestAnimationFrame(mainloop);
updateWave();
renderer.render(scene, camera);
}
var wave;
{ // creating a wave object
var geometry = new THREE.PlaneGeometry
(15, 15, 70, 70);
//geometry = new THREE.WireframeGeometry(geometry);
var material = new THREE.MeshNormalMaterial;
wave = new THREE.Mesh(geometry, material);
scene.add(wave);
}
// function that do all magic
// core formula: z = 0.6(sin(x+y+t) + cos(2t-y-xy));
function updateWave() {
var t = Date.now() * 0.004;
try {
for(var v of wave.geometry.vertices) {
var x = v.x, y = v.y, z = v.z,
e = Math.E, pi = Math.PI,
d = Math.hypot(x, y),
sin = a => Math.sin(a),
cos = a => Math.cos(a),
sqrt = a => Math.sqrt(a),
abs = a => Math.abs(a),
log = a => Math.log(a);
var input = document.getElementsByTagName('input')[0];
eval(input.value)
v.z = z;
}
} catch(e) {}
wave.geometry.verticesNeedUpdate = true;
wave.geometry.computeVertexNormals();
wave.rotation.z += 0.01;
}
mainloop(); // entry point
}
H tag color font-family header code example
ReplyDelete