三个JS例子：5.三个JS动画关键帧

港控/mmm° 2023-09-27 18:42 16阅读 0赞

How to use Three JS in React JS  
React-three-fiber is a React renderer for three.jsInstalling react-three-fibernpm install three @react-three/fiber Create your first geometryimport \{ 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\]\} /> <meshStandardMaterial color=\{hovered ? ‘hotpink’ : ‘orange’\} /> )\}createRoot(document.getElementById(‘root’)).render( <pointLight position=\{\[10, 10, 10\]\} /> <Box position=\{\[-1.2, 0, 0\]\} /> <Box position=\{\[1.2, 0, 0\]\} /> ,)  
![在这里插入图片描述][8c9b7958433b42cab2deff2dafc25a47.jpeg]

[8c9b7958433b42cab2deff2dafc25a47.jpeg]: https://img-blog.csdnimg.cn/8c9b7958433b42cab2deff2dafc25a47.jpeg

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关三个JS实例：9.三个JS幽灵卡片动画

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

叁歲伎倆/ 2023年09月27日 18:42/ 0 赞/ 119 阅读

相关三个JS实例：8.三个JS SPACE GLOBE动画

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

太过爱你忘了你带给我的痛/ 2023年09月27日 18:42/ 0 赞/ 112 阅读

相关三个JS实例：7.三个JS动画裁剪

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

向右看齐/ 2023年09月27日 18:42/ 0 赞/ 119 阅读

相关三个JS实例：6.三个JS动画蒙皮混合

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

曾经终败给现在/ 2023年09月27日 18:42/ 0 赞/ 14 阅读

相关三个JS例子：5.三个JS动画关键帧

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

港控/mmm°/ 2023年09月27日 18:42/ 0 赞/ 17 阅读

相关三个JS实例：4.三个js几何动画

React-three-fiber is a React renderer for three.js Installing react-three-fibernpm ins

墨蓝/ 2023年09月27日 18:41/ 0 赞/ 101 阅读

相关三个JS例子：3.三个JS交互粒子文本

How to use Three JS in React JS React-three-fiber is a React renderer for three.jsInst

雨点打透心脏的1/2处/ 2023年09月27日 18:41/ 0 赞/ 107 阅读

相关三个JS实例：2.三个js火箭动画

Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。三个js文档

左手的ㄟ右手/ 2023年09月27日 18:40/ 0 赞/ 13 阅读

相关三个JS实例： 1.三个JS立方体动画

React-three-fiber 是 three.js 的 React 渲染器安装反应三纤维npm install three @react-three/fiber 创

ゞ浴缸里的玫瑰/ 2023年09月27日 18:39/ 0 赞/ 20 阅读

相关 js--两个例子

前言之前介绍的是JavaScript的基础知识，看多了自然就会乏味，所以在这里放上两个小例子，解解乏。内容 1、由json对象创建一个table表格 j

末蓝、/ 2021年09月27日 04:22/ 0 赞/ 296 阅读