JSFiddle - React, Tailwind, and code Playground

by yi hom

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 src="http://yihom.github.io/paper/js/KeyboardState.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, keyboard = new KeyboardState(),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();
var startb;
var nine = new Array(-41,-40,-39,-1,0,1,39,40,41);
var twfive = new Array(-82,-81,-80,-79,-78,-42,-41,-40,-39,-38,-2,-1,0,1,2,38,39,40,41,42,78,79,80,81,82);
var ru,rv;
var sandsum=0;

function reuv(){//pick return u0,v0
	var x,z;
	x=mousepos.x;
	z=mousepos.z;
	if(mousepos.x<=0){
		x=-1*x/100;
		ru=0.5-x;
	}
	else{
		 x=x/100;
		 ru=0.5+x;
	}
//	console.log("u0:"+ru);	
	if(mousepos.z<=0){
		z=-1*z/100;
		rv=0.5-z;	
	}
	else{
		z=z/100;
		rv=0.5+z;	
	}
//	console.log("v0:"+rv);
	ru=ru*40;
	rv=rv*40;
	ru=Math.floor(ru);
	rv=Math.floor(rv);
}

/*沙子掉落					    */
/*點擊位置掉落					*/
function pointdrop(pos){//sand drop
    var radius = 5;
    var nvs = SandGeometry.vertices.length;
    var clickLoc = new THREE.Vector3(pos.x, 0, pos.z);
    for (var i = 0; i < nvs; i++) {
        var vv = new THREE.Vector3(SandGeometry.vertices[i].x,
        0, SandGeometry.vertices[i].z);
        var dist = clickLoc.distanceTo(vv);
        if (dist < radius) {
            SandGeometry.vertices[i].y += 0.5 * Math.exp(0.01 * dist);
        }
    }
	startb=1;
    SandGeometry.computeFaceNormals();
    SandGeometry.computeVertexNormals();
    SandGeometry.normalsNeedUpdate = true;
    SandGeometry.verticesNeedUpdate = true;
	for(i = 0; i<SandGeometry.vertices.length; i++){
		sandsum+=SandGeometry.vertices[i].y;
	}
	console.log(sandsum);
	sandsum=0;
}

var point;
var reduce=0;
var lastvec = new THREE.Vector2(-1,-1);//上一個位置
var nowvec = new THREE.Vector2();//目前位置
var nlvec = new THREE.Vector2();//目前位置-上一個位置
var dvec = new THREE.Vector2();//各點到目前位置的向量
function pointdraw(){
	var counter = 0;
	var dotsum = 0;
	var inc = 0;
	var addu,addv,addp;
	point=40*rv+ru;
	
	var...