使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat,.ply,.ksplat文件

前言

假设您正在现有项目中集成这些包,而该项目的构建工具为 Webpack 或 Vite。同时,您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法,请随时留言。

安装

cmd 复制代码
npm install three @types/three @react-three/fiber @react-three/drei @mkkellogg/gaussian-splats-3d

设置两个标头

gaussian-splats-3d内部使用WorkerSharedArrayBuffer(共享内存)。

对于顶级文档,需要设置两个标头来实现你网站的跨源隔离:

  • Cross-Origin-Opener-Policy 设置为 same-origin(来保护你的源站点免受攻击)
  • Cross-Origin-Embedder-Policy 设置为 require-corp 或 credentialless(保护受害者免受你的源站点的影响)
webpack设置标头
json 复制代码
{
    "devServer":{
        "headers": {
      "Cross-Origin-Embedder-Policy": "require-corp",
       "Cross-Origin-Opener-Policy": "same-origin"
      }
    }
}
vite设置标头
cmd 复制代码
npm i -D vite-plugin-cross-origin-isolation
js 复制代码
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    {
      name: "configure-response-headers",
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
          res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
          next();
        });
      },
    },
  ],
});

创建一个组件

useViewer.ts

js 复制代码
import { useCallback, useEffect } from 'react';
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
import { Scene } from 'three';

interface Options {
  scene: Scene;
}
export const useViewer= ({ scene }: Options) => {
  const init = useCallback(() => {
    const viewer = new GaussianSplats3D.DropInViewer();
    viewer.addSplatScenes(
      [
        {
          path: 'assets/bonsai-7k-mini.splat',
          splatAlphaRemovalThreshold: 20
        }
      ],
      true
    );
    scene.add(viewer);
  }, [scene]);

  useEffect(() => {
    init();
  }, []);
};
js 复制代码
import React, { useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { PerspectiveCamera, Scene, Vector3 } from 'three';
import { useViewer } from '@/hooks/useWorkRoom';

function setupCamera() {
  const camera = new PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 500);
  camera.position.set(0, -4, 0);
  camera.lookAt(new Vector3().fromArray([0, 0, 0]));
  camera.up = new Vector3().fromArray([0, -1, -0.6]).normalize();
  return camera;
}

function setupScene() {
  const scene = new Scene();
  return scene;
}

export const Dashboard = () => {
  const scene = useRef<Scene>(setupScene());
  const camera = useRef<PerspectiveCamera>(setupCamera());
  useViewer({ scene: scene.current });
  return (
    <Canvas scene={scene.current} camera={camera.current}>
      <OrbitControls />
    </Canvas>
  );
};

export default Dashboard;

效果

相关推荐
真的很上进2 分钟前
⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
java·前端·javascript·react.js·前端框架·vue·es6
小牛itbull2 分钟前
ReactPress 安装指南:从 MySQL 安装到项目启动
前端·javascript·数据库·mysql·react.js·开源·reactpress
@大迁世界7 分钟前
释放 PWA 的力量:2024 年的现代Web应用|React + TypeScript 示例
前端·javascript·react.js·前端框架·ecmascript
宅博士小陈7 分钟前
NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍
前端·javascript·vue.js
布兰妮甜15 分钟前
Angular框架:构建现代Web应用的全面指南
前端·javascript·前端框架·angular.js
雪碧聊技术1 小时前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan1 小时前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。1 小时前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒1 小时前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun1 小时前
react的import 导入语句中的特殊符号
前端·react.js