JSFiddle - React, Tailwind, and code Playground

by jmchen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script id="myVertexShader" type="x-shader/x-vertex">
    attribute float vertexHeight;
    varying float varyHeight;

    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    varyHeight = vertexHeight;
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying float varyHeight;

    void main() {
        float diffuse = 1.0 - varyHeight;
        gl_FragColor = vec4(diffuse, diffuse, diffuse, 1.0);
    }
</script>

JavaScript

var camera, scene, renderer, light, controls,mouse = new THREE.Vector2(),clock,raycaster;
var mousepos = new THREE.Vector3();
var glass, sand;//玻璃、沙面
var pickables = [];//可被pick
var SandGeometry,SandMaterial,GlassGeometry,GlassMaterial,meshMaterial;
var wf=0;
var angle = 0;
init();
animate();

/*玻璃面*/
/*大小100*100  x:-50~50 y:-50~50*/
/*位置(0,-1,0)						*/
function GlassPlane(){
	GlassGeometry = new THREE.BoxGeometry(100, 1, 100);
	GlassMaterial = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        wireframe: false,
        side: THREE.DoubleSide,
    });
	glass = new THREE.Mesh(GlassGeometry, GlassMaterial);
	glass.position.set(0,-1,0);
	scene.add(glass);
}

/*沙面*/
/*大小100*100  x:-50~50 y:-50~50*/
/*分為40*40個高度點				*/
/*位置(0,-1,0)						*/
/*name:sandplane					*/
function SandPlane(){

	SandFunc = function (u0, v0) {
        return new THREE.Vector3(-50 + 100 * u0,6 * Math.random(), -50 + 100 * v0);
    };
	SandGeometry = new THREE.ParametricGeometry(SandFunc, 39, 39);
    SandGeometry.computeFaceNormals();
    SandGeometry.computeVertexNormals();

    SandMaterial = new THREE.MeshPhongMaterial({
        wireframe: false,
        side: THREE.DoubleSide,
		polygonOffset: true,
        polygonOffsetFactor: +1.0,
        polygonOffsetUnits: +4.0
    });
	
    meshMaterial = new THREE.ShaderMaterial({
        // uniform not used...
		side: THREE.DoubleSide,
        uniforms: {
            lightpos: {
                type: 'v3',
                value: new THREE.Vector3()
            }
        },
        attributes: {
            vertexHeight: {
                type: 'f',
                value: []
            }
        },
		vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });
	
    sand = new THREE.Mesh(SandGeometry, meshMaterial);	
	sand.position.set(0,11,0);
	scene.add(sand);
}

/*玻璃邊框*/
function box(){
	var BoxGeometry = new THREE.BoxGeometry(112, 10,...