import * as THREE from'https://unpkg.com/three@0.126.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';
 
let camera;
let scene;
let renderer;
let model;
 
init();
animate();
 
function init() {
    //シーンの作成
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x008000); // 背景色
 
    //カメラの作成
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    //カメラセット
    camera.position.set(10, 25, 45); // カメラの位置
    camera.lookAt(new THREE.Vector3(0, 10, 0));
    
     // 滑らかにカメラコントローラーを制御する
    const controls = new OrbitControls(camera, document.body);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2; //回転の滑らかさ
 
    //光源
    const dirLight = new THREE.SpotLight(0xffffff,1.5);//color,強度
    dirLight.position.set(-20, 30, 30); // 光源の位置
    scene.add(dirLight);
 
    //レンダラー
    renderer = new THREE.WebGLRenderer({ 
        alpha: true,
        antialias: true
    });
    renderer.setClearColor(new THREE.Color(0xffffff));
    renderer.setSize(480, 270);
 
    //glbファイルの読み込み
    const loader = new GLTFLoader();
 
    loader.load('torii_big.gltf', function(gltf) {
        model = gltf.scene;
        model.traverse((object) => { //モデルの構成要素
            if(object.isMesh) { //その構成要素がメッシュだったら
            object.material.trasparent = true;//透明許可
            object.material.opacity = 0.8;//透過
            object.material.depthTest = true;//陰影で消える部分
            }})
        scene.add(model);
    }, undefined, function(e) {
        console.error(e);
    });
 
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
}
 
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}