JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://mevedia.com/share/ShaderMaterialExtend.js"></script>
<script src="https://mevedia.com/share/ChainableOnBeforeCompile.js?v6"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r107/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://royale-flush.glitch.me/terrain.js"></script>
 <script src="https://jeromeetienne.github.io/threex.terrain/examples/vendor/three.js/examples/js/SimplexNoise.js"></script>

CSS

//modelDiffuse

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();
scene.background = new THREE.Color("#006994");
   scene.fog = new THREE.FogExp2("#006994", 0.0002);
    // 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.DirectionalLight(0xffffff);
    light.position.set(100, 250, 250);
    scene.add(light);

		 var lt = new THREE.AmbientLight( 0x404040 ); // soft white light
   scene.add( lt );
 // geometry
    var geometry = new THREE.TorusBufferGeometry( 1, 0.2, 16, 100 );
  
   var sphereMaterial = new THREE.MeshPhongMaterial({
        
    });
    // material
     THREE.ImageUtils.crossOrigin = '';
                var texture = THREE.ImageUtils.loadTexture('https://cdn.glitch.com/673d0d01-5f8e-4eea-8711-f4f4f55a29bb%2FPicsArt_11-20-12.35.12.jpg?1542735475101');


var causticMaterial = function(diffuseColor, map, scale, transparent, opacity, side){
   var material = THREE.ShaderMaterial.extend(THREE.MeshLambertMaterial, {

      header: 'uniform vec3 tint; varying vec2 vUv; uniform sampler2D textureSampler; uniform bool hasTexture; uniform vec3 modelDiffuse;uniform vec2 resolution;uniform float time; uniform float uvScale; vec2 hash2(vec2 p ) { return fract(sin(vec2(dot(p, vec2(123.4,...