sader

src/components/PointViewer/index.jsx

+/*
+ * @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 } from "@react-three/fiber";
+import "./index.less";
+
+function PointViewer({ 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} />
+        <Gltf
+          src={"./model.glb"}
+          receiveShadow
+          castShadow
+          position={[0, 0, 0]}
+        />
+      </Canvas>
+    </div>
+  );
+}
+
+export default PointViewer;

src/components/PointViewer/index.less

+.foo-block-element {
+  border-radius: 5px;
+  color: #fff;
+  background-color: #08a9fe;
+  box-shadow: 0 5px 20px rgba(8,169,254,.1);
+}
+.bar-block-component {
+  position: relative;
+  background-color: #f0f0f0;
+  box-shadow: 0 5px 20px rgba(192,57,43,.1);
+}
+.bar-block-component, .foo-block-element {
+  margin: 10px;
+  border-radius: 5px;
+  color: #fff;
+}
+.bar-block-component .button-remove {
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  transform: translateY(-50%);
+  color: red;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+}
+.bf-content{
+  height: 80vh !important;
+}
\ No newline at end of file