import * as THREE from '/api/threemodule/libs/three.module.js';
import { OrbitControls } from '/uploads/threejs/OrbitControls.js';

const CAMERA_POS = [0, 0, 25];
const CAMERA_TARGET = [0, 0, 0];

AB.newDiv('container');
const container = document.getElementById('container');

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();

// set background to light blue
scene.background = new THREE.Color(0x00ffff);

const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.set(...CAMERA_POS);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(...CAMERA_TARGET);
controls.maxAzimuthAngle = Math.PI * 0.2;
controls.minAzimuthAngle = -Math.PI * 0.2;
controls.maxPolarAngle = Math.PI * 0.7;
controls.minPolarAngle = Math.PI * 0.2;
controls.enableZoom = true;
controls.enablePan = true;

renderer.render( scene, camera );