在本文中，我們將瞭解如何製作一個看起來像甜甜圈的 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 是一個 ... 閱讀更多