React-three-fiber 是 three.js 的 React 渲染器
安装反应三纤维npm install three @react-three/fiber 创建您的第一个几何体import { createRoot } from 'react-dom/client’import React, { useRef, useState } from 'react’import { Canvas, useFrame } from '@react-three/fiber’function Box(props) { // This reference gives us direct access to the THREE.Mesh object const ref = useRef() // Hold state for hovered and clicked events const [hovered, hover] = useState(false) const [clicked, click] = useState(false) // Subscribe this component to the render-loop, rotate the mesh every frame useFrame((state, delta) => (ref.current.rotation.x += delta)) // Return the view, these are regular Threejs elements expressed in JSX return ( <mesh {…props} ref={ref} scale={clicked ? 1.5 : 1} onClick={(event) => click(!clicked)} onPointerOver={(event) => hover(true)} onPointerOut={(event) => hover(false)}> <boxGeometry args={[1, 1, 1]
三个JS实例: 1.三个JS立方体动画
于 2023-05-04 16:42:53 首次发布
本文通过React库的React-three-fiber组件,展示了如何创建三个立方体的动画效果。通过安装和导入所需依赖,定义Box组件并利用useFrame订阅渲染循环实现立方体旋转,结合状态管理实现鼠标悬停和点击时的交互变化。
摘要由CSDN通过智能技术生成