【小沐学Web3D】three.js 加载三维模型（React Three Fiber）

news2025/4/18 7:36:13

文章目录

  • 1、简介
    • 1.1 Three.js
    • 1.2 React Three Fiber
  • 2、测试
    • 2.1 初始化环境
    • 2.2 app.js修改（显示内置立方体）
    • 2.3 app.js修改（显示内置球体）
    • 2.4 app.js修改（显示自定义立方体）
    • 2.5 app.js修改（显示多个模型）
    • 2.6 app.js修改（加载obj模型）
    • 2.7 app.js修改（物理效果）
  • 结语

1、简介

1.1 Three.js

Three.js 是一个功能强大的 3D 图形库，用于在网页上创建和显示交互式 3D 图形。它基于 WebGL，提供了简单易用的 API，帮助开发者快速构建复杂的 3D 场景。

npm install three

1.2 React Three Fiber

React Three Fiber 是一个 React 的绑定库，用于在 React 应用中创建和管理 3D 场景。它基于 Three.js，提供了声明式的 API，使 3D 开发更加直观和高效。

npm install three @react-three/fiber

2、测试

2.1 初始化环境

创建应用:

npx create-react-app@latest my-app

在这里插入图片描述
运行一下react初始环境:

cd my-app
npm start

在这里插入图片描述
在这里插入图片描述

安装依赖:

npm install three @react-three/fiber

在这里插入图片描述

npm install @react-three/drei

在这里插入图片描述
修改index.css:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #f0f0f0;
}

2.2 app.js修改（显示内置立方体）

修改App.js代码：

import {useState,useRef} from "react"
import {Canvas, useFrame} from "@react-three/fiber"

function App() {
  return (
   <Canvas>
  <ambientLight intensity={0.1} />
  <directionalLight color="red" position={[0, 0, 3]} />
  <mesh>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
</Canvas>
  );
}

export default App;

运行如下：
在这里插入图片描述

2.3 app.js修改（显示内置球体）

修改App.js代码：

import {useState,useRef} from "react"
import { Canvas, useFrame} from "@react-three/fiber"

function App() {
  return (
	<Canvas>
	<ambientLight intensity={0.1} />
	<directionalLight color="red" position={[0, 0, 5]} />
	<mesh visible userData={{ hello: 'world' }} position={[1, 0, 3]} rotation={[Math.PI / 2, 0, 0]}>
		<sphereGeometry args={[1, 16, 16]} />
		<meshStandardMaterial color="hotpink" transparent />
	</mesh>
	</Canvas>
  );
}

export default App;

运行如下：
在这里插入图片描述

2.4 app.js修改（显示自定义立方体）

修改App.js代码：

import React, { Suspense } from 'react'
import { BoxGeometry, MeshStandardMaterial } from 'three'
import { Canvas } from '@react-three/fiber'
import { ContactShadows, OrbitControls } from '@react-three/drei'

const ball = new BoxGeometry()
const mtl1 = new MeshStandardMaterial({ color: '#f00' })

export default function Demo () {
    return (
        <Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}>
            <Suspense fallback={null}>
                <ambientLight intensity={0.1} />
                <directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} />
                <mesh geometry={ball} material={mtl1} />
                <OrbitControls makeDefault />
                <ContactShadows rotation-x={Math.PI / 2} position={[0, -1.4, 0]} opacity={0.75} width={10} height={10} blur={2.6} far={2} />
                <color attach='background' args={['#aaa']} />
            </Suspense>
        </Canvas>
    )
}

运行如下：
在这里插入图片描述

2.5 app.js修改（显示多个模型）

修改App.js代码：

import { useRef, useState, useEffect } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function Box(props) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef()
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (ref.current.rotation.x += delta))
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => (event.stopPropagation(), hover(true))}
      onPointerOut={(event) => hover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

export default function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 2] }} // 初始相机位置
    >
      <ambientLight intensity={Math.PI / 2} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
      <Box position={[3.2, 0, 0]} />
      <OrbitControls />
	  
    </Canvas>
  )
}

在这里插入图片描述

2.6 app.js修改（加载obj模型）

修改App.js代码：

import React, { Suspense, useRef } from 'react'
import { AxesHelper } from 'three'
import { Canvas, useLoader } from '@react-three/fiber'
import { Environment, OrbitControls, Stats } from '@react-three/drei'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

function MyMesh () {
    const src = '/obj/cow.obj'
    const object = useLoader(OBJLoader, src)
    console.log(object)
    return (
        <primitive object={object} />
    )
}

export default function Demo () {
    const statRef = useRef(null)
    return (
        <div ref={statRef}>
            <Stats showPanel={0} parent={statRef} style={{ top: 'auto', bottom: 0 }} />
			<Canvas style={{ height: 800 }} camera={{ fov: 75, near: 0.1, far: 1000, position: [2, 1, 2] }}>
				<Suspense fallback={null}>
					<directionalLight color={'#fff'} intensity={1} position={[-3, 5, 5]} />
					<primitive object={new AxesHelper(100)} />
					<MyMesh />
					<OrbitControls makeDefault />
					<color attach='background' args={['#aaa']} />
					<Environment
						background={false} preset={null} scene={undefined}
						path={'/skybox/'}
						files={['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']}
					/>
				</Suspense>
			</Canvas>
        </div>
    )
}

运行如下：
在这里插入图片描述

2.7 app.js修改（物理效果）

npm install @react-three/cannon

在这里插入图片描述

import { useEffect, useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { Physics, usePlane, useBox } from '@react-three/cannon'

function Plane(props) {
  const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }))
  return (
    <mesh receiveShadow ref={ref}>
      <planeGeometry args={[1000, 1000]} />
      <meshStandardMaterial color="#f0f0f0" />
    </mesh>
  )
}

function Cube(props) {
  const [ref] = useBox(() => ({ mass: 1, ...props }))
  return (
    <mesh castShadow ref={ref}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

export default function App() {
  const [ready, set] = useState(false)
  useEffect(() => {
    const timeout = setTimeout(() => set(true), 1000)
    return () => clearTimeout(timeout)
  }, [])
  return (
    <Canvas dpr={[1, 2]} shadows camera={{ position: [-5, 5, 5], fov: 50 }}>
	  <ambientLight intensity={Math.PI / 2} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
      <spotLight angle={0.25} penumbra={0.5} position={[10, 10, 5]} castShadow />
      <Physics>
        <Plane />
        <Cube position={[0, 5, 0]} />
        <Cube position={[0.45, 7, -0.25]} />
        <Cube position={[-0.45, 9, 0.25]} />
        {ready && <Cube position={[-0.45, 10, 0.25]} />}
      </Physics>
    </Canvas>
  )
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2331408.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sqlalchemy查询json

sqlalchemy查询json

第一种&#xff1a;字段op是json格式&#xff1a; {"uid": "cxb123456789","role": 2,"op_start_time": 1743513707504,"op_end_time": 1743513707504,"op_start_id": "op_001","op_end_id"…
阅读更多...
物联网外设管理服务平台

物联网外设管理服务平台

1 开发目标 1.1 架构图 操作系统&#xff1a;基于Linux5.10.10源码和STM32MP157开发板&#xff0c;完成tf-a(FSBL)、u-boot(SSBL)、uImage、dtbs的裁剪&#xff1b; 驱动层&#xff1a;为每个外设配置DTS并且单独封装外设驱动模块。其中电压ADC测试&#xff0c;采用linux内核…
阅读更多...
1.ElasticSearch-入门基础操作

1.ElasticSearch-入门基础操作

一、介绍 The Elastic Stack 包含ElasticSearch、Kibana、Beats、LogStash 这就是所说的ELK 能够安全可靠地获取任何来源、任何格式的数据&#xff0c;然后实时地对数据进行搜索、分析和可视化。Elaticsearch,简称为ES&#xff0c;ES是一个开源的高扩展的分布式全文搜索引擎,是…
阅读更多...
uniapp加载json动画

uniapp加载json动画

一、添加canvas画布 <canvas id"lottie_demo" type"2d" style"display: inline-block;width: 148rpx; height: 148rpx;" /> 二、引入依赖和JSON文件 安装依赖 npm install lottie-miniprogram --save import lottie from lottie-mini…
阅读更多...
图论：最小生成树

图论：最小生成树

最小生成树 &#xff08;无向无环图&#xff09; 概念 1.Prim算法 P3366 【模板】最小生成树 - 洛谷 邻接矩阵实现 #include<iostream> #include<cstring> using namespace std; const int INF 0x3f3f3f3f; const int N 5e3 10; int dis[N]; //记录每个结点到…
阅读更多...
rqlite：一个基于SQLite构建的分布式数据库

rqlite：一个基于SQLite构建的分布式数据库

今天给大家介绍一个基于 SQLite 构建的轻量级分布式关系型数据库&#xff1a;rqlite。 rqlite 基于 Raft 协议&#xff0c;结合了 SQLite 的简洁性以及高可用分布式系统的稳健性&#xff0c;对开发者友好&#xff0c;操作极其简便&#xff0c;其核心设计理念是以最低的复杂度实…
阅读更多...
Dynamics 365 Business Central Recurring Sales Lines 经常购买销售行 来作 订阅

Dynamics 365 Business Central Recurring Sales Lines 经常购买销售行 来作 订阅

#D365 BC ERP# #Navision# 前面有节文章专门介绍了BC 2024 Wave 2 支持的更好的Substription & Recurring Billing。 其实在D365 BC ERP中一直有一个比较简单的订阅模块Recrring Sales Lines。本文将介绍一下如何用Recurring Sales Lines来 实施简易的订阅Substription。具…
阅读更多...
探索生成式AI在游戏开发中的应用——3D角色生成式 AI 实现

探索生成式AI在游戏开发中的应用——3D角色生成式 AI 实现

概述 自从开创性论文 Denoising Diffusion Probabilistic Models 发布以来&#xff0c;此类图像生成器一直在改进&#xff0c;生成的图像质量在多个指标上都击败了 GAN&#xff0c;并且与真实图像无法区分。 NeRF: Representing Scenes as Neural Radiance Fields for View S…
阅读更多...
K8s 老鸟的配置管理避雷手册

K8s 老鸟的配置管理避雷手册

Yining, China 引言 对于这种案例&#xff0c;你们的处理思路是怎么样的呢&#xff0c;是否真正的处理过&#xff0c;如果遇到&#xff0c;你们应该怎么处理。 最后有相关的学习群&#xff0c;有兴趣可以加入。 开始 一、血泪教训&#xff1a;环境变量引发的真实灾难 1.1 …
阅读更多...
3-Visual Studio 2022打包NET开发项目为安装包

3-Visual Studio 2022打包NET开发项目为安装包

引言 本文将上一期博文>>>门店管理系统开发<<<开发的项目打包为Windows安装包 一&#xff0c;安装扩展 安装此扩展&#xff1a;installer Projects 二&#xff0c;创建安装程序项目 创建项目 右键解决方案-添加-新建项目 选择setup Project项目 填写项目名…
阅读更多...
国内外网络安全政策动态（2025年3月）

国内外网络安全政策动态（2025年3月）

▶︎ 1.《关于进一步加强智能网联汽车产品准入、召回及软件在线升级管理的通知》发布 3月1日&#xff0c;工业和信息化部、市场监管总局联合发布《关于进一步加强智能网联汽车产品准入、召回及软件在线升级管理的通知》&#xff08;以下简称《通知》&#xff09;。 该通知旨在…
阅读更多...
已知Word内容格式固定，通过宏实现Word转Excel

已知Word内容格式固定，通过宏实现Word转Excel

文章目录 需求描述一、宏是什么&#xff1f;二、使用步骤1.启用开发工具2.VBA基础知识3.单个Word文件转为Excel4.批量将Word文件转为Excel文件 总结 需求描述 现在有多个Word文档&#xff0c;Word文档格式固定&#xff0c;假如Word内容分为单选题和多选题&#xff0c;每个题目…
阅读更多...
SpringDoc【使用详解】

SpringDoc【使用详解】

SpringDoc使用详解 一、何为SpringDoc二、概念解释三、SpringDoc使用2.1简单集成2.2 配置SpringDoc2.2.1 yml方式配置2.2.2配置文档信息 2.3配置文档分组2.4使用注解2.4.1 Tag2.4.2 Operation2.4.3 Schema2.4.4 NotNull2.4.5 Parameter2.4.6 Parameters2.4.7 ApiResponses 和Ap…
阅读更多...
Redis持久化 | RDB AOF | 常见问题

Redis持久化 | RDB AOF | 常见问题

目录 RDB&#xff08;Redis DataBase&#xff09; 给什么内存数据做快照——&#xff08;全量&#xff09; 触发机制 RDB文件生成的时候会阻塞主线程吗&#xff1f; 关闭持久化命令 bgsave执行流程 RDB文件怎么配置&#xff1f;有哪些优缺点 优点&#xff1a; 缺点&am…
阅读更多...
判断矩阵A是否可以相似对角化

判断矩阵A是否可以相似对角化

【例题1】 【例题2】
阅读更多...
React 列表渲染

React 列表渲染

开发环境&#xff1a;Reacttsantd 你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据&#xff0c;从而将一个数据集渲染成多个相似的组件。在这篇文章中&#xff0c;你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。 …
阅读更多...
[ctfshow web入门] web25

[ctfshow web入门] web25

信息收集 要想拿到flag&#xff0c;需要突破两层if。 解题 第一个if 传入r0&#xff0c;拿到mt_rand的值&#xff0c;由于每一次访问都会重新设置种子&#xff0c;所以每一次访问都是一样的随机数。 所以我们的r mt_rand-显示的值 1799250188 r1799250188就可以突破第一…
阅读更多...
【数据结构】树的介绍

【数据结构】树的介绍

目录 一、树1.1什么是树&#xff1f;1.2 树的概念与结构1.3树的相关术语1.4 树形结构实际运用场景 二、二叉树2.1 概念与结构2.2 特殊的二叉树2.2.1 满二叉树2.2.2 完全二叉树 个人主页&#xff0c;点击这里~ 数据结构专栏&#xff0c;点击这里~ 一、树 1.1什么是树&#xff1…
阅读更多...
Android源码之App启动

Android源码之App启动

目录 App启动概述 App启动过程 App启动过程图 源码概述 跨进程启动 进程内启动 下面以应用桌面Launcher启动App的MainActivity来举例&#xff1a; App启动概述 首先&#xff0c;MainActivity是由Launcher组件来启动的&#xff0c;而Launcher又是通过Activity管理服务Act…
阅读更多...
【GESP】C++二级练习 luogu-B3721 [语言月赛202303] Stone Gambling S

【GESP】C++二级练习 luogu-B3721 [语言月赛202303] Stone Gambling S

GESP二级练习&#xff0c;多层循环分支练习&#xff0c;难度★✮☆☆☆。 题目题解详见&#xff1a;https://www.coderli.com/gesp-2-luogu-b3721/ 【GESP】C二级练习 luogu-B3721 [语言月赛202303] Stone Gambling S | OneCoderGESP二级练习&#xff0c;多层循环分支练习&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023