在本文中，我们将了解如何制作一个看起来像甜甜圈的 3D 图形。我们将使用 react-three-fiber 在网页中应用它。我们将使用此包来制作一个类似甜甜圈的形状，它会不断移动，并且我们将从内部看到它。示例首先，下载重要的库 -npm i --save @react-three/fiber threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器。Three-fiber 将用于连接 threejs 和 React。在 App.js 中添加以下代码行 -import React, { useRef } from "react"; import { Canvas, useFrame } ... 阅读更多

在本文中，我们将了解如何通过使用第三方包 react-three-fiber 在 React 中使用 Three.js。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形示例首先，安装 react-three-fiber 包 -npm i --save @react-three/fiber threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器。在 App.js 中添加以下代码行 -import React, { useRef, useState } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; function Box(props) {    const mesh = useRef();    useFrame(() => ... 阅读更多

在本文中，我们将了解如何在 React 中使用 react-three-fiber 包来制作一个旋转的环。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形示例首先，下载重要的库 -npm i --save @react-three/fiber threethreejs 和 react-three/fiber 将用于向网站添加 webGL 渲染器。在 index.css 中添加以下代码行 -* {    box-sizing: border-box; } html, body, #root{ width: 100%; height: 100%; margin: 0; ... 阅读更多

在本文中，我们将了解如何在列表中拖放元素。拖放功能在您制作聊天、约会、消息传递或任何其他类似类型的 Web 应用程序时可能是一个有用的功能。示例首先安装“react-beautiful-dnd”包 -npm i --save react-beautiful-dnd此库将用于在列表中添加可拖放元素。在 App.js 中添加以下代码行 -import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import React, { useState } from "react"; import "./App.css"; const finalSpaceCharacters = [    {       id: "gary",       name: "Gary Goodspeed", ... 阅读更多

在本文中，我们将学习如何在 React JS 中制作自动完成和建议框。自动完成是每个网站都具有的基本功能之一，但是将其在 React 网站中实现非常复杂且存在问题。在这里，我们将了解在 React JS 中自动完成的简单实现。首先创建一个 React 项目 -npx create-react-app tutorialpurpose现在转到项目目录 -cd tutorialpurpose示例首先下载一个包 -npm install --save downshift此库用于为搜索框添加建议列表，并且列表将写入数组中。您只需复制以下代码并更改其样式和 ... 阅读更多

在本文中，我们将了解如何使用 react-spring 包在 React JS 中创建滚动到顶部动画。首先创建一个 React 项目 -npx create-react-app tutorialpurpose现在转到项目目录 -cd tutorialpurpose示例安装 react-spring 包 -npm install react-springreact-spring 用于向我们的网站添加基于弹簧概念的动画。接下来，在 App.js 中添加以下代码行 -import React, {useState} from 'react' import { useSpring, animated } from 'react-spring' export default function App(){ const [flip, set] = useState(false) const words = ['We', 'came.', 'We', 'saw.', 'We', 'hold', 'it s', ... 阅读更多

Lottie 是一种开源动画文件格式，它体积小、质量高、交互性强，并且可以在运行时进行操作。让我们学习如何在 React.js 中实现 Lottie 动画。Lottie 动画主要用于加载屏幕或作为启动屏幕。它以 JSON 格式编写并在我们的 React 项目中实现。示例转到官方 Lottie 动画网站并下载 Lottie JSON。我将使用的动画链接 - https://lottiefiles.com/74546-character-02#/将 JSON 文件命名为“myloader.json”并将其保存在与 App.js 相同的级别。现在安装 react-lottie 包 -npm i --save react-lottieLottie 库将用于添加 ... 阅读更多

在本文中，我们将了解如何使用 react-threefiber 创建 3D 文本。我们将首先下载 JSON 格式的字体，然后将其添加到我们的 Text Geometry 对象中。我们将向其添加轨道控制，这将允许在屏幕上移动文本并正确查看 3D 文本。因此，让我们开始吧。示例首先，下载重要的库 -npm i --save @react-three/fiber three此库 react-three/fiber 将用于向网站添加 webGL 渲染器以及连接 threejs 和 React。现在安装一个字体 JSON 并将其放在“src”文件夹中。您可以下载一个 ... 阅读更多

在本文中，您将学习如何使用 react-threefiber 创建地球仪。我们将首先制作一个球体，然后将整个地球地图映射到它上面。这是一个有趣的纹理加载器功能，我们可以使用它将任何图像作为纹理包裹在球体上。因此，让我们开始吧！示例首先，下载重要的库 -npm i --save @react-three/fiber three此库 react-three/fiber 将用于向网站添加 webGL 渲染器以及连接 threejs 和 React。下载地球地图的图像并将其放置在“src”文件夹中。我们将图像文件命名为“world-map.gif”。添加以下 ... 阅读更多

ReactJS 和 NodeJS 都是如今广泛使用的 JavaScript 子集，具有高性能。但两者在某些方面有所不同。在下面的文章中，我们将讨论两者之间的区别以及哪一个更适合用于构建 Web 应用程序以及原因？NodeJS它是一个完全开源且跨平台的运行时环境，用于在浏览器外部执行 JavaScript 代码。NodeJs 的事件驱动模型允许用户创建快速且可扩展的网络应用程序。关于 NodeJS 需要记住的第一件事是，它既不是框架也不是编程语言。NodeJS 是一个 ... 阅读更多