<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>

    <script type="module">
        var obj_3d = {{obj_3d}};
        import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js';
        import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js';
        import {OBJLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/OBJLoader.js';

        function main() {
        const canvas = document.querySelector('#c');
        const renderer = new THREE.WebGLRenderer({canvas});

        const fov = {{camera.fov}};
        const aspect = {{camera.aspect}};  // the canvas default
        const near = {{camera.near}};
        const far = {{camera.far}};
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.set({{camera.pos_x}}, {{camera.pos_y}}, {{camera.pos_z}});

        const controls = new OrbitControls(camera, canvas);
        controls.target.set({{camera.orbit_x}}, {{camera.orbit_y}}, {{camera.orbit_z}});
        controls.update();

        const scene = new THREE.Scene();
        scene.background = new THREE.Color('black');

        {
            const skyColor = 0xB1E1FF;  // light blue
            const groundColor = 0xB97A20;  // brownish orange
            const intensity = 1;
            const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
            scene.add(light);
        }

        {
            const color = {{light.color}};
            const intensity = {{light.intensity}};
            const light = new THREE.DirectionalLight(color, intensity);
            light.position.set({{light.pos_x}}, {{light.pos_y}}, {{light.pos_z}});
            light.target.position.set({{light.target_x}}, {{light.target_y}}, {{light.target_z}});
            scene.add(light);
            scene.add(light.target);
        }

        {
            const objLoader = new OBJLoader();
            const mesh = objLoader.parse(obj_3d['obj']);
            mesh.scale.set({{obj_options.scale_x}}, {{obj_options.scale_y}}, {{obj_options.scale_z}});
            scene.add(mesh);
        }

        function resizeRendererToDisplaySize(renderer) {
            const canvas = renderer.domElement;
            const width = canvas.clientWidth;
            const height = canvas.clientHeight;
            const needResize = canvas.width !== width || canvas.height !== height;
            if (needResize) {
            renderer.setSize(width, height, false);
            }
            return needResize;
        }

        function render() {

            if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
            }

            renderer.render(scene, camera);

            requestAnimationFrame(render);
        }

        requestAnimationFrame(render);
        }

        main();

    </script>
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
</html>