JSFiddle - React, Tailwind, and code Playground

by Pixic

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="https://rawgit.com/chandlerprall/Physijs/master/physi.js"></script>
<body>
</body>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );


var geometry = new THREE.PlaneGeometry(100,100,99,99);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

for ( var i = 0; i<geometry.vertices.length; i++ ) {
    geometry.vertices[i].z = Math.floor(Math.random()*10);
}

geometry.computeFaceNormals();
geometry.computeVertexNormals();

var terrain = new Physijs.HeightfieldMesh(
    geometry, 
    material,
    0
);
terrain.rotation.x -= 90 * Math.PI / 180;

scene.add(terrain);

camera.position.z = 50;
camera.position.y = 20;

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera ); 
}
render();