AB.newDiv('container');
AB.loadCSS ('/uploads/threeport/main.css');

import * as THREE from '/uploads/thibb1/three.module.js';
import {OrbitControls} from '/uploads/thibb1/OrbitControls.js';

let scene, camera, renderer;
let geometry, material, mesh;
let light;
let clock;

function init() {
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.toneMapping = THREE.ReinhardToneMapping;
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    clock = new THREE.Clock();

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(5, 5, 5);

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 3, 0 );
    light.castShadow = true;
    scene.add( light );

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set( 0, 1, 0 );
    controls.update();

    scene.background = new THREE.Color(0xa0a0a0);

    const plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x818181, depthWrite: false } ) );
    plane.rotation.x = - Math.PI / 2;
    plane.receiveShadow = true;
    scene.add( plane );

    geometry = new THREE.BoxGeometry();
    material = new THREE.MeshLambertMaterial({color: 0x00ff00});
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.y = 1;
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add(mesh);

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

    AB.msg(`<button onclick='test();'>TEST</button>`, 7);
}

function test() {
    console.log('TEST');
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    // rotate the light
    const time = clock.getElapsedTime();
    light.position.x = Math.sin( time ) * 10;
    light.position.z = Math.cos( time ) * 10;
    // dirLight.position.y = Math.sin( time * 3 );


    renderer.render(scene, camera);
}

init();
animate();