//annotation
 import
{

  Color,
  LinearEncoding,
  MeshBasicMaterial,
  Mesh,
  PerspectiveCamera,
  sRGBEncoding,
  Sprite,
  HemisphereLight,
  SpriteMaterial,
  TextureLoader,
  BoxBufferGeometry,
  Scene,
  Vector3,
  WebGLRenderer,
  CanvasTexture,
  CubeTextureLoader,
  BoxGeometry,
  MeshPhongMaterial,
  LineSegments,
  DoubleSide,
  FlatShading,
  WireframeGeometry,
  LineBasicMaterial,
   Object3D,
  
 
} 
from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
// from "https://cdn.jsdelivr.net/npm/three@99/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js";

// //annotation
// // Number

const canvas = document.getElementById("number");
const ctx = canvas.getContext("2d");
const x = 32;
const y = 32;
const radius = 30;
const startAngle = 0;
const endAngle = Math.PI * 2;

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.fill();

ctx.strokeStyle = "rgb(255, 255, 255)";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "32px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("1", x, y);


// //global variables
var camera, scene, renderer, controls;
var sprite, spriteBehindObject, mesh, model;
const annotation = document.querySelector(".annotation");

init();
render();

//camera set up and model loading
function init(){
    //camera settings
    camera = new PerspectiveCamera(15, window.innerWidth/window.innerHeight, 1, 1000 );
    camera.position.set(0,0,200);

    scene = new Scene();

    //renderer setting
    renderer = new WebGLRenderer({antialias:true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(0xffffff);
    renderer.gammaFactor = 2.2;
    renderer.gammaOutput = true;
    renderer.physicallyCorrectLights = true;
    document.body.appendChild( renderer.domElement );

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

    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;

    

    var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
    var loader = new CubeTextureLoader().setPath( '/examples/3d-obj-loader/reflections/Park2/' );
    var background = loader.load( urls );

    var light = new HemisphereLight( 0xffffff, 0xffffff , 5 );
    light.position.set( 0, 1, 0 );
    scene.add( light );
  
    

//     const cubeGeometry = new BoxGeometry(500, 500, 500);
//     mesh = new Mesh(
//         cubeGeometry,
//         new MeshPhongMaterial({
//             color: 0x156289,
//             emissive: 0x072534,
//             side: DoubleSide,
//             shading: FlatShading
//         })
//     );

//     const line = new LineSegments(
//         new WireframeGeometry(cubeGeometry),
//         new LineBasicMaterial({
//             color: 0xffffff,
//             linewidth: 1,
//             opacity: 0.25,
//             transparent: true
//         })
//     );

//     scene.add(mesh);
//     scene.add(line);
  
    //model
    var loader = new GLTFLoader();
    loader.load('https://rawcdn.githack.com/mrdoob/three.js/76d16bd828c8d3e1870eac45aa466c20313cf944/examples/models/gltf/Nefertiti/Nefertiti.glb', function ( gltf ) {
    gltf.scene.traverse(function (child)  {
    if (child.isMesh){
          child.material.envMap = background ;
    }
    } );
   model = gltf.scene;
    scene.add( gltf.scene);
    gltf.scene.position.y -= 10;
    
    }, undefined, function ( error ) {
    console.error( error );

    } );

  
    // Sprite

    const numberTexture = new CanvasTexture(
        document.querySelector("#number")
    );

    const spriteMaterial = new SpriteMaterial({
        map: numberTexture,
        alphaTest: 0.5,
        transparent: true,
        depthTest: false,
        depthWrite: false
    });

    sprite = new Sprite(spriteMaterial);
    sprite.scale.set(3, 3, 1);
    sprite.position.set(0, 0, 10);

   // scene.add(sprite);
  
    var parent = new Object3D();
    parent.add(sprite);
    parent.add(model);
    scene.add(parent);
    }
    
function onWindowResize(){
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );

}

function render(){

    requestAnimationFrame( render );
    controls.update();
    renderer.render(scene, camera);
    updateScreenPosition();
	

}



function updateScreenPosition() {
    const vector = new Vector3(0, 0, 10);
    const canvas = renderer.domElement;
    
    vector.project(camera);

    vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
    vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));
    annotation.style.transform = `translate(${vector.x}px,${vector.y}px)`;
    annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
}