둥둥

window.addEventListener('load', init, false);

function init() {
    console.log('Init Functions');
    createWorld();
    createLights();
    createBoat();
    createGrid();
    createOcean();
    animation();
}
var Theme = {
    _dark: 0x000000, // Background
    _cont: 0xFFD3D3, // Lines
    _blue: 0x000FFF,
    _red: 0xF00000, //
    _cyan: 0x00FFFF, // Material
    _white: 0xF00589 // Lights
}
var scene, camera, renderer, container;
var _width, _height;
var _ambientLights, _lights, _rectAreaLight;
var _ocean;
var _boatGroup = new THREE.Object3D();

function createWorld() {
    _width = window.innerWidth;
    _height = window.innerHeight;
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(Theme._dark, 5, 20);
    scene.background = new THREE.Color(Theme._dark);

    camera = new THREE.PerspectiveCamera(20, _width / _height, 1, 1000);
    camera.position.set(0, 2, 10);

    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: false
    });
    renderer.setSize(_width, _height);
    renderer.shadowMap.enabled = true;

    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    _width = window.innerWidth;
    _height = window.innerHeight;
    renderer.setSize(_width, _height);
    camera.aspect = _width / _height;
    camera.updateProjectionMatrix();
}

function createLights() {
    _ambientLights = new THREE.HemisphereLight(Theme._cont, Theme._white, 2);
    _backlight = new THREE.PointLight(Theme._white, 1);
    _backlight.position.set(-5, -20, -20);
    _rectAreaLight = new THREE.RectAreaLight(Theme._white, 20, 3, 3);
    _rectAreaLight.position.set(2, 2, -20);
    _rectAreaLightHelper = new THREE.RectAreaLightHelper(_rectAreaLight);

    _frontlight = new THREE.PointLight(Theme._white, 0.1);
    _frontlight.position.set(0, 2, -2);
    scene.add(_backlight);
    scene.add(_ambientLights);
    scene.add(_rectAreaLight);
    scene.add(_frontlight);
}

boatElement = function () {
    var boatGeo = new THREE.CubeGeometry();
    var boatMat = new THREE.MeshStandardMaterial({
        color: Theme._white
    });
    this.boat = new THREE.Object3D();
    this.boat = new THREE.Mesh(boatGeo, boatMat);
    this.boat.castShadow = true;
    this.boat.vel = 1 + Math.random() * 4;
    this.boat.amp = 1 + Math.random() * 6;
    this.boat.pos = Math.random() * .2;
    this.boat.add(this.boat);
}
boatElement.prototype.movePosition = function (moveValue = 1) {
    this.boat.position.x = -Math.random() * moveValue + Math.random() * moveValue;
    this.boat.position.z = -Math.random() * moveValue + Math.random() * moveValue;
    this.boat.rotation.y = (Math.random() * 360) * Math.PI / 180;
}
boatElement.prototype.sizeElement = function (sizeValue = 1) {
    this.boat.scale.z = this.boat.scale.x = Math.random() * sizeValue;
    this.boat.scale.y = 0.5 + Math.random() * (sizeValue * 2);
}

function createBoat(boatValue = 5) {
    for (var i = 0; i < boatValue; i++) {
        var _boatElementItem = new boatElement();
        _boatElementItem.movePosition(5);
        _boatElementItem.sizeElement();
        _boatGroup.add(_boatElementItem.boat);
    };
    scene.add(_boatGroup);
    console.log('Hello Boat');
}
oceanElement = function (wirefr = true, geo_frag = 25) {
    var geo_size = 25;
    var geo = new THREE.PlaneGeometry(geo_size, geo_size, geo_frag, geo_frag);
    geo.mergeVertices();
    this.mesh = new THREE.Object3D();
    var l = geo.vertices.length;
    this.waves = [];
    //---
    for (var i = 0; i < l; i++) {
        var v = geo.vertices[i];
        this.waves.push({
            y: v.y,
            x: v.x,
            z: v.z,
            ang: Math.PI * 2,
            amp: Math.random() * (0.2),
            speed: 0.03 + Math.random() * 0.05
        });
    };
    var wmat = new THREE.MeshPhysicalMaterial({
        color: Theme._white,
        wireframe: true,
        transparent: false,
        opacity: 1
    });
    var mat = new THREE.MeshPhysicalMaterial({
        color: Theme._white,
        transparent: true,
        opacity: 0.85,
        wireframe: false
    });
    this.wire = new THREE.Mesh(geo, wmat);
    this.mesh = new THREE.Mesh(geo, mat);
    if (wirefr) this.mesh.add(this.wire);
    this.mesh.add(this.mesh);
    this.mesh.reseivedShadow = true;
    this.mesh.rotation.x = -90 * Math.PI / 180;
}
oceanElement.prototype.moveVertices = function () {
    var verts = this.mesh.geometry.vertices;
    var l = verts.length;

    for (var i = 0; i < l; i++) {
        var v = verts[i];
        var vpros = this.waves[i];
        v.x = vpros.x + Math.cos(vpros.ang) * vpros.amp;
        v.y = vpros.y + Math.sin(vpros.ang / 2) * vpros.amp;
        v.z = vpros.z + Math.cos(vpros.ang / 3) * vpros.amp;
        vpros.ang += vpros.speed;
    };
    this.mesh.geometry.verticesNeedUpdate = true;
    this.mesh.geometry.morphTargetsNeedUpdate = true;
}

function createOcean() {
    _ocean = new oceanElement();
    _ocean.mesh.scale.set(1, 1, 1);
    scene.add(_ocean.mesh);
}

function createGrid(_gridY = -1) {
    var gridHelper = new THREE.GridHelper(20, 20);
    gridHelper.position.y = _gridY;
    scene.add(gridHelper);
}

function animation() {
    var time = Date.now() * 0.003;
    camera.lookAt(scene.position);
    _rectAreaLight.lookAt(scene.position);

    _ocean.moveVertices();
    for (var i = 0, l = _boatGroup.children.length; i < l; i++) {
        var _boatChildrens = _boatGroup.children[i];
        _boatChildrens.rotation.z = (Math.sin(time / _boatChildrens.vel) * _boatChildrens.amp) * Math.PI / 180;
        _boatChildrens.rotation.x = (Math.cos(time) * _boatChildrens.vel) * Math.PI / 180;
        _boatChildrens.position.y = Math.sin(time / _boatChildrens.vel) * _boatChildrens.pos;
    }
    //_ocean.mesh.rotation.z += 0.002;
    
    scene.rotation.y += 0.001;
    requestAnimationFrame(animation);
    renderer.render(scene, camera);
}