/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
import * as THREE from 'three';
import { useRef, useEffect } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import "./index.scss";
import LightGroup from "./scene/light-group";
export var DEFAULT_CAMERA_STATE = {
  distance: 20,
  perspective: true,
  phi: 60,
  target: [0, 0, 0],
  targetOffset: [0, 0, 0],
  targetOrientation: [0, 0, 0, 1],
  thetaOffset: 45,
  fovy: 45,
  near: 0.5,
  far: 2000
};
var Three = function Three(props) {
  console.log('=======');
  console.log(props);
  var _props$style = props.style,
    style = _props$style === void 0 ? {} : _props$style;
  var canvasRef = useRef(null);
  // 场景
  var currentScene = useRef();

  // 模型的缩放比例
  var CAR_SCALE = 0.012;
  useEffect(function () {
    setTimeout(function () {
      init();
    }, 1000);
  }, []);
  var init = function init() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xade1fe);
    var width = canvasRef.current.offsetWidth;
    var height = canvasRef.current.offsetHeight;

    // 创建相机
    var camera = new THREE.PerspectiveCamera(DEFAULT_CAMERA_STATE.fovy, width / height);
    camera.position.set(15, 8, 5);
    camera.lookAt(0, 0, 0);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true
    });
    renderer.setSize(width, height);

    // 灯光
    var lightGroup = new LightGroup();
    scene.add(lightGroup.getLightGroup());
    var controls = new OrbitControls(camera, canvasRef.current);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;
    controls.keyPanSpeed = 20.0;

    // 加载 glb 模型
    var loader = new GLTFLoader().setPath('');
    loader.load('http://static.ks.x/kernelsoft-lowcode-material@0.1.1-alpha2/kernelSoftCar.glb', function (gltf) {
      gltf.scene.children[0].scale.set(CAR_SCALE, CAR_SCALE, CAR_SCALE);
      scene.add(gltf.scene.children[0]);
    });

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      // 更新控制器
      controls.update();
      renderer.render(scene, camera);
    }
    animate();
    currentScene.current = scene;
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("canvas", {
    ref: canvasRef,
    className: "three-material",
    style: style
  }));
};
Three.displayName = 'Three';
export default Three;