3D 技术的出现为创新和创造力打开了新的大门，以以前被认为不可能的方式改变了数字格局。虽然 2D 网站通过其简单性和用户友好性提供了出色的用户体验，但 Web 设计已经超越了传统布局的限制。想象一个网站，您可以在其中浏览虚拟陈列室、旋转产品的 3D 模型、实时定制产品。这很有趣，不是吗？
研究表明，当信息以视觉方式呈现时，人们往往会更好地保留信息。例如，必须将手机的 2D 图像与 3D 模型进行比较。哪个更能传达手机的实际规格和设计细节？当然是 3D 模型。几家顶级公司（苹果、耐克、阿迪达斯、奥迪、特斯拉、三星等）在其网站上利用 3D 技术的沉浸式功能，以引人入胜的方式展示他们的产品或服务。
在本文中，我们将探讨如何在您的网站上渲染 3D 模型，并添加一些基本动画以提高交互性，您不想错过！
先决条件
-
ReactJs 的基础知识
-
基本的 CSS 技能
-
基本 GSAP （GreenSock Animation Platform） 技能
-
对 ThreeJ 的基本了解
渲染 3D 模型
在深入研究渲染过程之前，有必要刷新我们对 Three.js 基础知识的记忆。
帆布
画布是用作 3D 图形的渲染表面的 HTML 元素。它充当容器，Three.js 在其中渲染场景、对象和动画。canvas 元素由 React Three Fiber 中的 Canvas 组件创建和管理，提供 Three.js 与 React 应用程序的无缝集成。
光
就像你在暗室中看不到一样，threejs 中的场景需要光才能正确渲染网格材质。threejs 中有三种类型的光;
-
环境光
- 为整个场景提供一般、均匀的光线，使所有内容可见，而不会产生阴影。
-
定向光源
-
就像阳光一样，朝一个方向照射并产生阴影，为对象提供逼真的效果。
-
聚光灯 - 工作方式类似于手电筒，将光线聚焦在特定区域或对象上，并且可以投射阴影。
动态观察控件
React Three Fiber 中的 OrbitControls 组件允许用户通过旋转、缩放和平移相机来与场景交互 3D 模型。它提供直观的鼠标和触摸控件，使导航和探索 3D 环境变得更加容易。此组件对于通过实现平稳且响应迅速的摄像机移动来增强用户体验至关重要。
是时候在我们的应用程序中渲染 3D 模型了。本项目中使用的模型来自 Sketchfab，这是一个来自不同作者的数千个 3D 模型的主页。
渲染 3D 模型的步骤
1.下载并解压缩 .gltf 文件
- 下载 .gltf 格式文件并将其解压缩以访问其内容。
2.将文件移动到公共文件夹
- 将 .bin 文件、.gltf 文件和 textures 文件夹移动到项目的 public 文件夹中。
3.为清楚起见
重命名文件 将 .gltf 和 .bin 文件从默认名称 “scene” 重命名为更具描述性的模型名称。
4.更新 .gltf 文件
-
在文本编辑器中打开 .gltf 文件。
-
搜索 buffers 部分并更新 uri 以匹配重命名的 .bin 文件。
在 React 应用程序中渲染模型
现在，对于在 React 应用程序中渲染模型的关键步骤，您需要将 .gltf 文件转换为 JSX。
- 将 .gltf 转换为 JSX
-
打开您的终端。
-
使用 cd 命令导航到 .gltf 文件的位置。
-
运行以下命令：
npx gltfjsx name.gltf
- 将 name.gltf 替换为 .gltf 文件的实际名称。
此过程将生成一个 JSX 组件，您可以导入该组件并在 React 应用程序中使用它来渲染 3D 模型。这将创建模型的新 jsx 文件，打开 jsx 文件。运行命令后，请按照以下步骤编辑生成的 JSX 文件，以便正确集成到您的 React 应用程序中：npx gltfjsx name.gltf
- 将 default 关键字添加到 export 语句中
- 在文本编辑器中打开生成的 JSX 文件。
- 在文件底部找到 export 语句。
- 修改它以包含 default 关键字。
- 将函数重命名为模型名称
- 在文件开头找到函数定义。
- 重命名函数以匹配您的模型名称，以提高清晰度和可维护性。
保存 Changes 来渲染模型，你应该简单地调用从 react-three/fiber 导入的 Canvas 组件中的模型组件。还记得我们学到的关于照明的知识吗？因此，我们需要向场景添加光照，我们将在项目中添加环境光。
import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { ContactShadows, OrbitControls } from "@react-three/drei";
import Watch from '../../public/Watch'
function CanvasContainer() {
return (
<Canvas
camera={{
position : [2.353582538479416, 0.6054083440896885, 3.217196497518671]
}}
>
<ambientLight intensity={2.5} />
<OrbitControls enableZoom={false}/>
<Suspense fallback={null}>
<Watch />
</Suspense>
<ContactShadows
position={[0, -2, 0]}
opacity={0.5}
scale={50}
blur={1}
far={10}
resolution={256}
color="#000000"
/>
</Canvas>
);
}
export default CanvasContainer;
我们已经成功地在我们的应用程序中渲染了我们的模型。我将更进一步，设置画布组件的样式，将其高度设置为 100 视区高度。
干得好，你已经能够在 React 应用程序中渲染 3D 模型了。你现在还没有走到这一步，所以让我们继续前进吧！
使用 GSAP SCROLLTRIGGER 制作动画
当应用程序中有滚动时，该节目的主角 GSAP scrolltrigger 用于为我们的 3D 模型制作动画。要利用 gsap 的动画功能，我们需要使用以下代码导入它：
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
动画代码编写在我们的模型 JSX 文件中。让我们一步一步仔细地完成动画制作过程：
1.导入必要的函数
首先，确保导入我们将用于动画的必要函数。
2.解构 Camera 和 Scene 对象
接下来，我们需要将 Camera 和 Scene 对象从渲染模型时创建的 Three.js 对象中解构。这是至关重要的一步，因为它构成了我们动画的基础。
3.此外，在 gsap 中创建一个时间轴实例，后续动画将应用于该实例。这有助于正确
地对动画进行排序 const tl = gsap.timeline（）
4.为模型
制作动画 动画过程包括沿三个轴调整相机的位置，以及调整场景的位置和旋转。因此，必须能够访问这些值才能获得有效的动画效果。
以下是该过程的代码片段：
import React, { useRef, useLayoutEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Canvas, useThree } from '@react-three/fiber';
gsap.registerPlugin(ScrollTrigger);
function MyModel(props) {
const group = useRef();
const { scene, camera } = useThree();
useLayoutEffect(() => {
// Animation code using GSAP and ScrollTrigger
gsap.to(camera.position, {
x: 10, // Example value, adjust as needed
y: 5, // Example value, adjust as needed
z: 15, // Example value, adjust as needed{
scrollTrigger: {
trigger: '#yourElementId', // Replace with your actual element ID or class
start: 'top top',
end: 'bottom bottom',
scrub: true,
}}
});
gsap.to(scene.position, {
x: 10, // Example value, adjust as needed
y: 5, // Example value, adjust as needed
z: 15, // Example value, adjust as needed{
scrollTrigger: {
trigger: '#yourElementId', // Replace with your actual element ID or class
start: 'top top',
end: 'bottom bottom',
scrub: true,
}}
});
gsap.to(scene.rotation, {
x: 10, // Example value, adjust as needed
y: 5, // Example value, adjust as needed
z: 15, // Example value, adjust as needed{
scrollTrigger: {
trigger: '#yourElementId', // Replace with your actual element ID or class
start: 'top top',
end: 'bottom bottom',
scrub: true,
}}
});
});
}, []);
return (
<group ref={group} {...props} dispose={null}>
{/* Model nodes and materials */}
</group>
);
}
useGLTF.preload('/path/to/model.gltf');
export default MyModel;
您可能想知道我是如何获得摄像机位置、场景位置和场景旋转的 x、y 和 z 值，这些都是我们动画的基础。我使用 Leva 的 useControl 来获取摄像机位置、场景位置和场景旋转的实时值。这些值是通过直观的 UI 进行调整的，如下图所示。这种方法允许精确控制和轻松微调，确保所需的视觉结果。
import {useControls} from 'leva'
const {cameraPosition, scenePosition, sceneRotation} = useControls({
cameraPosition: {
value: {x:0, y:0, z:0},
step: 0.05
},
scenePosition: {
value: {x:0, y:0, z:0},
step: 0.05
},
sceneRotation: {
value: {x:0, y:0, z:0},
step: 0.05
}
})
useFrame(() => {
camera.position.x = cameraPosition.x;
camera.position.y = cameraPosition.y;
camera.position.z = cameraPosition.z;
scene.position.x = scenePosition.x;
scene.position.y = scenePosition.y;
scene.position.z = scenePosition.z;
scene.rotation.x = sceneRotation.x;
scene.rotation.y = sceneRotation.y;
scene.rotation.z = sceneRotation.z;
})
结论
我必须表扬你一直坚持到最后，干得好。本文涵盖了很多内容，从 3D 网站相对于传统 2D 网站的沉浸式优势，到逐步完成创建交互式 3D 动画的过程。我们研究了实现这个很棒的动画所需的技术，我们还探索了如何在 React 应用程序中渲染 3D 模型。最后，我们更进一步，探索了动画制作过程，了解了 GSAP scrolltrigger 以及如何使用它来制作 3D 模型的动画。
在本文中，我们只介绍了 3D Web 动画的基础知识，通过利用 3D Web 动画的全部功能可以实现很多目标。这是您构建令人瞠目结舌的 3D 网站的垫脚石，开始练习吧，伙计！
发表评论 取消回复