数据结构
网络
关系数据库管理系统
操作系统
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+ 浏览量
广告