/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-03 11:31:00
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-24 14:27:24
 * @FilePath: /editor-plus/src/pages/components/GlftBlock/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Gltf, OrbitControls } from "@react-three/drei";
import { Canvas, useLoader } from "@react-three/fiber";
import { memo } from "react";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import "./index.less";

const ModelLoader = memo(({ url = "./glb/camera.obj" }) => {
  let loader,
    urlsplit = url.split(".");

  const modelType = urlsplit[urlsplit.length - 1];

  if (modelType === "gltf" || modelType === "glb") {
    return <Gltf src={url} receiveShadow castShadow position={[0, 0, 0]} />;
  } else if (modelType === "obj") {
    loader = useLoader(OBJLoader, url);
    return (
      <group>
        <primitive
          object={loader.clone()}
          receiveShadow
          castShadow
          position={[0, 0, 0]}
        />
      </group>
    );
  } else if (modelType === "fbx") {
    loader = useLoader(FBXLoader, url);
    return (
      <group>
        <primitive
          object={loader.scene.clone()}
          receiveShadow
          castShadow
          position={[0, 0, 0]}
        />
      </group>
    );
  }
});

function ThreeViewer({ url }) {
  return (
    <div className="bar-block-component">
      <Canvas style={{ height: "600px", width: "100%" }} id={"sada"}>
        <color attach="background" args={["#333"]} />
        <ambientLight intensity={1} />
        <OrbitControls></OrbitControls>
        <pointLight position={[10, 10, 10]} intensity={1} />
        <ModelLoader url={url} />
      </Canvas>
    </div>
  );
}

export default ThreeViewer;