在这篇文章中，我们将学习如何制作一个看起来像甜甜圈的 3D 图形。我们将使用 react-three-fiber 将其应用于网页。我们将使用这个包来制作一个不断旋转的甜甜圈形状，并从内部观察它。示例首先，下载重要的库：npm i --save @react-three/fiber three threejs 和 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 three threejs 和 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 three threejs 和 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-spring react-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-lottie Lottie 库将用于添加 ... 阅读更多

在这篇文章中，我们将学习如何使用 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 是一个…… 阅读更多