<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <style>
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <!-- R05.02.06追加　importmapをサポートしないブラウザへの対策 -->
        <script async src="./?action=common_download_main&upload_id=467"></script>
        <script type="importmap">
            {
                "imports": {
                    "three": "./?action=common_download_main&upload_id=416",
                    "stlloader": "./?action=common_download_main&upload_id=420",
                    "orbitcontrols": "./?action=common_download_main&upload_id=421"
                }
            }
        </script>
        <script type="module">
            import * as THREE from "three";
            import { STLLoader } from "stlloader";
            import { OrbitControls } from "orbitcontrols";
            const dx = 0.1 / 8;
            const dy = 0.1 / 8;
            let container, camera, scene, mesh, renderer;
            init();
            animate();

            function init() {
                container = document.createElement( "div" );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight);
                camera.position.set(0, 0, 3 );
                const controls = new OrbitControls(camera, document.body);
                scene = new THREE.Scene();
                const loader = new STLLoader();            
                loader.load( "./?action=common_download_main&upload_id=442", function ( geometry ) {
                    const material = new THREE.MeshNormalMaterial();
                    mesh = new THREE.Mesh( geometry, material );
                    mesh.geometry.center();
                    mesh.geometry.computeVertexNormals();
                    mesh.geometry.computeBoundingSphere();
                    var scale =  1 / mesh.geometry.boundingSphere.radius;
                    mesh.scale.set( scale, scale, scale );
                    scene.add( mesh );
                } );
                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.outputEncoding = THREE.sRGBEncoding;
                container.appendChild( renderer.domElement );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

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

            function render() {
                mesh.rotation.x += dx;
                mesh.rotation.y += dy;
                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>