数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 React 中使用 react-three-fiber 创建坐标轴辅助线
当应用任何轨道控制时，坐标轴辅助线用于显示三维图形的方向。坐标轴利用坐标几何的概念来展示如何创建形状并为缩放、旋转、滑动等操作创建轨道。在开发 3D 环境时，它们非常有用。
示例
首先下载 **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";
const CameraController = () => {
const { camera, gl } = useThree();
useEffect(() => {
const controls = new OrbitControls(camera, gl.domElement);
return () => {
controls.dispose();
};
}, [camera, gl]);
return null;
};
export default function App() {
return (
<Canvas>
<CameraController />
<ambientLight />
//here axes helper is applied
<primitive object={new THREE.AxesHelper(10)} />
<mesh>
<boxGeometry attach="geometry" args={[5, 5, 5]} />
<meshBasicMaterial attach="material" color="lightblue" />
</mesh>
</Canvas>
);
}解释
我们只是创建了一个轨道控制和一个立方体。
坐标轴辅助线用于显示 3D 对象的方向。我们只是创建了一个立方体几何体，并使用 **meshBasicMaterial** 进行样式设置。
输出
它将产生以下输出 -
绿色、蓝色和红色灯光用于显示方向。
更新于: 2021年9月28日
2K+ 浏览量
广告