// Import THREE
import * as THREE from './three.js';

// Import the lcc library. Note, if you are writing code in a native HTML document, you need to set: <script type="module"></script>
// If you are using frameworks like webpack or vite, please configure ES6 support to import modules
import { LCCRender } from './lcc-0.4.0.js'

// Create a scene
const scene = new THREE.Scene();

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);

// Create a camera
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 0); // Set the camera position

// Load the lcc object. Note, the lcc object does not need to be added to the scene again, as the SDK has already added it
const lccObject = LCCRender.load({
    camera: camera,
    scene: scene,
    dataPath: 'http://example.com/data', 
    renderLib: THREE,
    renderer: renderer,  // Set renderer parameters
    canvas: renderer.domElement
}, function (mesh){
    // The model is loaded, and you can operate on the lcc mesh here
    console.log('Model loaded ', mesh)
}, function (percent) {
    console.log('Model loaded: ' + percent * 100 + '%')
});

function render() {
    // Update the scene
    LCCRender.update(); // Update LCCRender
    renderer.render(scene, camera);
}

function animate() {
    requestAnimationFrame(() => {
        render();
    });
}

// Scene animation
animate();