import * as THREE from 'three';
import {Logger} from './js_threesim/logger.js';
import {ThreeApp,ThreeObject} from './js_threesim/threesim.js';
import {OrbitControls} from './js_three/jsm/controls/OrbitControls.js';

const vertexShader = `  
varying highp vec2 vertexUV;
uniform float uTime;	//震荡快慢
uniform vec3 uPosition;	//鼠标单击位置
uniform float uRange;	//波纹范围
uniform float uAmplitude;	//波纹振幅

void main() { 
	vertexUV = uv;
	vec3 newPos;
	newPos = position;
	
	float len = distance(newPos, uPosition);
	//当前顶点距离鼠标单击点的距离
	if (len <= uRange){	//在波纹范围内
		float amp = uAmplitude * (uRange - len)/uRange;	//根据距离振幅衰减
		newPos.y = amp * sin(len/uRange * 2.0 * 3.14159 * 5.0 - uTime);	//以5个正弦波的方式向外扩散
	}
	gl_Position = projectionMatrix * modelViewMatrix * vec4( newPos, 1.0 );
}`;

const fragmentShader = `
precision highp float;	//高精度
uniform sampler2D Texture;
uniform vec2 uRepeat;
varying vec2 vertexUV;

void main() {
	vec2 texCoord = vec2(vertexUV.x * uRepeat.x ,vertexUV.y * uRepeat.y );
    texCoord = fract(texCoord); // 获取小数部分，实现重复

	vec4 texColor = texture2D(Texture, texCoord);
	texColor = texColor * vec4(0.0/255.0,80.0/255.0,250.0/255.0,1.0);	//(00,80,250)
	gl_FragColor = texColor;
}`;


class MyApp extends ThreeApp{
	static sceneSize = 100;
	constructor() {
		super();
	}
	init(param){
		super.init(param);
		this.param = param;

	    let object = new MyObject();
		object.init('海浪');
	    this.addObject(object);
	
	    this.camera.position.set(0, 0, 20);
	    this.camera.lookAt(new THREE.Vector3(0, 0, 0));
	
		this.controls = new OrbitControls(this.camera, this.renderer.domElement);
		this.focus();
	}
	
	update() {
	    super.update(this);
	    this.controls.update();
	}
	
	handleKeyDown(event){
	}
	
	handleKeyUp(event){
	}
	
	onWindowResize() {
		super.onWindowResize(this);
	}
}

class MyObject extends ThreeObject{
	constructor() {
		super();
	}
	
	init = function (name) {
		let root = new THREE.Object3D();
	    this.setObject3D(root);
	    this.name = '' || name;
	    this.root = root;

		let uniforms = {
		    Texture : {value : new THREE.TextureLoader().load('./images/water.jpg') },
		    uRepeat:{ value :new THREE.Vector2(10.0,10.0)},
		    uTime: { value: 0.0},
		    uPosition: {value: new THREE.Vector3(0,0,0)},	//波纹中心位置
		    uRange: {value: 50.0},
		    uAmplitude:{value: 1.0}	
		};
		this.uniforms = uniforms;

		let g = new THREE.PlaneGeometry(100,100,128,128);
		g.rotateX(-Math.PI/2);
		
		let m = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			side: THREE.DoubleSide
		});
		
		let mesh = new THREE.Mesh(g, m);
        mesh.position.set(0,-2,0);
        
		root.add(mesh);
	}
	
	update() {
	    super.update();
	    this.uniforms.uTime.value += 0.03;
	}
	
	handleMouseUp(x, y, point, normal, event) {
		this.uniforms.uPosition.value.copy(point);
	}
	
	handleMouseOver(x, y, point, normal) {
	    this.overCursor = "pointer";
	}
	
	handleMouseOut(x, y, point, normal) {
	}
	
	handleMouseMove(x, y, point, normal) {
        logger.logObject(this.uniforms.uPosition.value);
        logger.render();
	}
}


//----用于程序调试
let logger = new Logger(document.querySelector('#debug pre'));

/*-------------------Main start-------------------------*/
let container = document.getElementById("container");
let app = new MyApp();
app.init({container: container});
app.run();