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

墨蓝 2023-09-27 18:41 100阅读 0赞

React-three-fiber is a React renderer for three.js  
Installing 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\]\} /> ,)  
![在这里插入图片描述][929662943d844d20a13cbe2134103dd6.jpeg]

[929662943d844d20a13cbe2134103dd6.jpeg]: https://img-blog.csdnimg.cn/929662943d844d20a13cbe2134103dd6.jpeg

发表评论取消回复

表情：

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

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

相关阅读

相关三个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 赞/ 118 阅读

相关三个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 赞/ 118 阅读

相关三个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 赞/ 13 阅读

相关三个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 赞/ 14 阅读

相关三个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 赞/ 12 阅读

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

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

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

相关 js事件的三个阶段

![这里写图片描述][SouthEast] 事件的三个阶段：捕获，目标，冒泡。捕获阶段：从外到内，监听中设置为true,子类事件不产生目标阶段：点击的目标冒

亦凉/ 2022年06月17日 00:23/ 0 赞/ 227 阅读