資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 React 中使用 reactthree-fiber 新增 OrbitControls
在本文中，我們將瞭解如何在 React 中使用 react-three-fiber 新增 **OrbitControls**。這就像製作一個相機，我們可以移動螢幕並檢視任何 3D 物件的每一側。我們還可以使用 **OrbitControl** 提供縮放和滑動效果。所以，讓我們開始吧。
示例
安裝 **react-three/fiber** 庫 -
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 webGL 渲染器。**three-fiber** 將用於連線 **threejs** 和 React。
首先在 **App.js** 中建立一個軌道控制物件 -
import React, { useEffect } from "react";
import { Canvas, useThree } from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";
import "./App.scss";
const CameraController = () => {
const { camera, gl } = useThree();
useEffect(
() => {
const controls = new OrbitControls(camera, gl.domElement);
controls.minDistance = 3;
controls.maxDistance = 20;
return () => {
controls.dispose();
};
},
[camera, gl]
);
return null;
};**CameraController** 用於在整個螢幕上新增軌道控制。
**useThree()** 會給你一個相機物件，用於在螢幕上移動。
**gl** 指示你正在移動的區域。
在 **useEffect** 中，我們將 **OrbitControls** 物件組合在一起。
然後我們添加了 minDistance 和 maxDistance 引數來限制螢幕上的移動。
接下來，在 **App.css** 中新增以下行 -
* {
box-sizing: border-box;
}
html,body,#root{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
background: #f1f4f8;
position: fixed;
}此 CSS 用於使畫布匹配父級大小。
現在，讓我們在 App 元件中新增 **OrbitControl**。在 **App.js** 中新增以下程式碼行 -
export default function App(){
return (
<Canvas>
<CameraController />
<ambientLight />
<spotLight intensity={0.3} position={[5, 10, 50]} />
<mesh>
<boxGeometry attach="geometry" args={[3, 2, 1]} />
<meshPhongMaterial attach="material" color="hotpink" />
</mesh>
</Canvas>
);
};我們建立了一個長方體，並在 **App** 元件中添加了我們之前的 **orbitcontrol** 物件 **“CameraController”**。**OrbitControl** 用於在我們的畫布上新增放大、縮小、移動和其他效果。
輸出
執行後，它將產生以下輸出 -
更新於: 2021-09-28
2K+ 瀏覽量
廣告