parametric geometry

for sand modeling

by jmcjc5u

HTML

<div id="info">Click to add sand...</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script id='myVertexShader' type="x-shader/x-vertex">
    uniform vec3 lightPos;
    varying vec4 wPos;
    varying float diffuse;
    void main() {
        vec4 eyepos = modelViewMatrix * vec4(position, 1.0);
        vec4 eyeLightPos = viewMatrix * vec4(lightPos, 1.0);
        vec3 ll = normalize(eyeLightPos.xyz - eyepos.xyz);
        vec3 eyenorm = normalize(normalMatrix * normal);
        diffuse = abs(dot(eyenorm, ll));
        wPos = modelMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id='myFragmentShader' type="x-shader/x-vertex">
    //
    // FROM: http://jsfiddle.net/jmchen/cby3d1ag/
    //
    vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 mod289(vec4 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 permute(vec4 x) {
        return mod289(((x * 34.0) + 1.0) * x);
    }

    vec4 taylorInvSqrt(vec4 r) {
        return 1.79284291400159 - 0.85373472095314 * r;
    }

    float snoise(vec3 v) {
        const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

        // First corner
        vec3 i = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);

        // Other corners
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);

        //   x0 = x0 - 0.0 + 0.0 * C.xxx;
        //   x1 = x0 - i1  + 1.0 * C.xxx;
        //   x2 = x0 - i2  + 2.0 * C.xxx;
        //   x3 = x0 - 1.0 + 3.0 * C.xxx;
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x...

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow:hidden
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, controls;
var plane, cyl;
var mouse = new THREE.Vector2();
var gcontrols;
var texMaterial, noiseMaterial;

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 500;
    scene.add(camera);

    meshFunc = function (u0, v0) {
        return new THREE.Vector3(-100 + 200 * u0, 0, -100 + 200 * v0);
    };
    geometry = new THREE.ParametricGeometry(meshFunc, 40, 40);
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    THREE.ImageUtils.crossOrigin = '';
    var texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/8QLabSW.jpg');

    texMaterial = new THREE.MeshPhongMaterial({
        // color: 0xffffff,
        map: texture,
        wireframe: false,
        side: THREE.DoubleSide,
    });

    noiseMaterial = new THREE.ShaderMaterial({
        side: THREE.DoubleSide,
        uniforms: {
            lightPos: {
                type: 'v3',
                value: new THREE.Vector3(0, 110, 0)
            }
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent,
        wireframe: true
    });

    mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
    scene.add(mesh);

    light = new THREE.PointLight(0xffffff);
    light.position.set(0, 200, 0);
    scene.add(light);

    var axis = new THREE.AxisHelper(20);
    scene.add(axis);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var cyl_geom = new THREE.CylinderGeometry(3, 3, 6, 32);
    var cyl_mat = new THREE.MeshBasicMaterial({
        color: 0xff2211
    });
    cyl = new THREE.Mesh(cyl_geom, cyl_mat);
  ...