Waves Example Three.js

Coffee.org-Makes it Easy to Fill your Coffee Mug

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
}


Click here to see this awesome code in action




CyberLink Multimedia Software


More Free Code Examples:

Javascript Substitution Cipher


Javascript Easy Battleship Game












Comments

Post a Comment

Popular posts from this blog