在這篇文章中，我們將學習如何製作一個看起來像甜甜圈的 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 是一個…… 閱讀更多