JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas id="canvas" width="128" height="128">
<script>
var noise;
var z = 0;
var seed = 1288090*Math.random();
noise = new ImprovedPerlin(seed);
var reusableVector = new THREE.Vector3();
var reusableVector2 = new THREE.Vector2();
var UpdateImg = function(id){
    var canvas = document.getElementById(id);
    var width = canvas.width;
    var height = canvas.height;
    
    var ctx = canvas.getContext('2d');
    var imgData = ctx.getImageData(0,0,width,height);
    
    var wDiv = 1 / width;
    var hDiv = 1 / height;
    var zDiv = 1 / 64;
    
    for(var i = 0; i < imgData.data.length; i += 4){
        var x = (i / 4) % width;
        var y = (i / 4) / width;
        
        var density = 94 * noise.Noise(4 * x * wDiv, 4 * y * hDiv, z * zDiv) +
                      32 * noise.Noise(8 * x * wDiv, 8 * y * hDiv, z * zDiv) +
                      16 * noise.Noise(16 * x * wDiv, 16 * y * hDiv, z * zDiv) +
                      8 * noise.Noise(32 * x * wDiv, 32 * y * hDiv, z * zDiv) +
                      4 * noise.Noise(64 * x * wDiv, 64 * y * hDiv, z * zDiv) +
                      2 * noise.Noise(128 * x * wDiv, 128 * y * hDiv, z * zDiv);
        
        var val = 128 + density;
        
        imgData.data[i] = val;
        imgData.data[i + 1] = val;
        imgData.data[i + 2] = val;
        imgData.data[i + 3] = 255;
    }
    
    ctx.putImageData(imgData, 0, 0);
    z++;
};

function Rand(seed){
    this.m_w = seed;
    this.m_z = 987654321;
    this.mask = 0xffffffff;
    
    this.Next = function (){
        this.m_z = (36969 * (this.m_z & 65535) + (this.m_z >> 16)) & this.mask;
        this.m_w = (18000 * (this.m_w & 65535) + (this.m_w >> 16)) & this.mask;
        var result = ((this.m_z << 16) + this.m_w) & this.mask;
        result /= 4294967296;
        return result + 0.5;
    };
}

function...

CSS

#canvas {
    display: none;
    border: solid 1px black;
    float: right;
}

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;



init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 800);
    camera.lookAt(scene.position);

    // (camera) controls
    // mouse controls: left button to rotate, 
    //    mouse wheel to zoom, right button to pan
    controls = new THREE.OrbitControls(camera, renderer.domElement);

    // light    
    var light = new THREE.PointLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

   var lt = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( lt );
    // mesh
    UpdateImg('canvas');
var tx = new THREE.CanvasTexture(document.getElementById('canvas'))
console.log(tx)

THREE.ImageUtils.crossOrigin = '';
                var texture = THREE.ImageUtils.loadTexture('https://cdn.glitch.com/673d0d01-5f8e-4eea-8711-f4f4f55a29bb%2Fmoss_covered_rock_texture_2_by_fairiegoodmother_d1iqdwc-fullview.jpg?v=1550359563126');




    var sphereGeometry = new THREE.SphereBufferGeometry(100, 12, 16);
    var sphereMaterial = new THREE.MeshLambertMaterial({
        map: texture
    });
    applyDisplacementMap( sphereGeometry, tx, 400, 100 );
    
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.y = 100;
    scene.add(sphere);
		sphere.scale.set(.4, .4, .4)
    var planeGeometry = new THREE.PlaneGeometry(500, 500, 10, 10);
    
    //perlin noise generator




    var planeMaterial = new THREE.MeshLambertMaterial({
        color:...