首页 > 其他分享 >react-three-fiber

react-three-fiber

时间:2023-04-10 17:12:57浏览次数:36  
标签:fiber three react 设置 使用 属性

npx create-react-app . 当前目录下面安装 className / htmlFor 注视 { /* */ }   useState 第二个参数:最好使用 函数来设置值,因为 可能有异步的情况导致 值设置不正确 getItem('count')?? 0 undefined或者null   children 是一个数组, 可以直接 写成 prop的形式 [...Array(4)] 获得的值是 undefined useMemo 就是 computed 的作用 useRef 是一个对象 可能显示为 undefined 因为此时还没有DOM,点开就可以看见DOM 在 useEffect 中访问   react three fiber(react renderer) 有很多步骤都可以简写 例如 physical 而且代码更加 容易管理 使用起来也更加简单,基本上没有限制   three和react集成的很好 通过jsx的写法,编译成 一个场景   react three fiber 有一些默认的配置 例如:相机需要创建 移动位置 设置透视等配置 这样你就可以专注于 视图 当然你也可以手动调整这些参数 @ 大的系统,表示有很多相关的库   processing 更加高性能,更加多的效果   Drei 里面有很多帮助 库   所有深层次的嵌套,都可以使用 - 来代替 material-uniforms-resolution-value={[512, 512]} />   attach 属性       会检查组件的后缀 是否是 Material / Geometry 结尾 自动实现了所有基础类,都支持写成jsx的形式 如果three更新了,也能够正常使用   不需要手动创建 scene 照相机 渲染器 能够每一帧自动渲染 自适应viewport 大小,geometry都有默认的大小参数 declarative   构造函数需要的参数 都可以通过 args 来传递 args 不要通过 useState 去动态改变值,没次改变整个geometry都会重新销毁创建 如果 material 也可以使用 args, 但是最好使用 属性来赋值   scale={[ 1, 1, 1 ]} 等价于 scale={ 1 }   extend({ OrbitControls }) 因为不是 核心库,所以没有自动生成对应的组件   useState 设置初始值只会设置一次   自定义Geometry 计算出 normal computeVertexNormals 通常只需要计算一次     canvas 的配置 camera={{ fov, aspect,far,near, position: [3,2,1] }} 正交相机 不要去改变 top/bottom/left/right 因为r3f已经设置好了,以适应viewport(以适应上下宽高) 直接使用zoom 即可 far / near / position 控制器 会根据远近自动修改 zoom,而不是去修改 照相机   相机动画 使用useFrame 参数里面的相机即可 clock.elapsedTime 属性   flat 属性 相当于 NoToneMapping   toneMapping 默认 ACESFilmicToneMapping 对颜色也有影响 HDR 使得画面更加明亮, 使得亮处的辉光效果更加真实 能保留更多 亮步和暗部的细节 存储渲染结果的缓冲区是高动态格式   output encoding 对颜色 图片纹理 影响很大   alpha 属性 默认 canvas 背景是透明的,可以直接通过css来修改 pixel ratio dpr 属性 [1, 2] 是默认值,对于控制性能非常好 性能: 减少 draw calls / 简单的模型 / 避免大的贴图     journey.pmnd.rs

 

 

必须使用合适的曝光系数

 

 

适当提高Bloom的亮度阈值   将HDR渲染结果映射成LDR

 

 

  性能开销增加5%,对画面的提升巨大                            

标签:fiber,three,react,设置,使用,属性
From: https://www.cnblogs.com/escapist/p/17303545.html

相关文章

  • 和我一起学 Three.js【初级篇】:1. 搭建 3D 场景
    欢迎关注「前端乱步」公众号,我会在此分享Web开发技术,前沿科技与互联网资讯。0.系列文章合集本系列第6,7章节支持微信公众号内付费观看,将在全系列文章点赞数+评论数>=500,1000时分别解锁发布。《0.总论》......
  • Three.js 进阶之旅:全景漫游-高阶版在线看房
    声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要专栏上篇文章《Three.js进阶之旅:全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这......
  • ReactJS到React-Native,架构原理概述
    React是一个纯JS的UI库,只能干HTML/CSS/JS提供的Web服务(新的H5API不一定支持), React-Native厉害在于它能打通JS和NativeCode,让JS能够调用丰富的原生接口,充分发挥硬件的能力,实现非常复杂的效果,同时能保证效率和跨平台性。在一定程度上,ReactNative和NodeJS有异曲同工之妙......
  • 第136篇:Three.js基础入门动画API:setInterval 与 requestAnimationFrame的区别
    好家伙,书接上文 functionanimate(){//请求-动画-框架requestAnimationFrame(animate);//改变正方体在场景中的位置,让正方体动起来cube.rotation.x+=0.01;cube.rotation.y+=0.01;renderer.render(......
  • 导入 three.js 库
    发现导入three.js文件的时候,官方文档的写法是:import*asTHREEfrom'three';我并不清除three指的是文件夹还是js文件,如果是后者,应当加上.js后缀由于我并没有使用任何框架,我发现只有导入Three.js文件才能运行:import*asTHREEfrom'../node_modules/three/src......
  • 第135篇:Three.js基础入门
    好家伙,这东西太帅了,我要学会 先放张帅图(都是用three.js做出来的,这我学习动力直接拉满)  还有另外一个Junniis...帧数太高,录不了 开始学习官方文档1.Three.js是什么?Three.js是一款运行在浏览器中的3D引擎(基于WebGL的API的封装),你可以用它来创造你所需要的......
  • AtCoder ABC295 D - Three Days Ago
    AtCoderABC295D-ThreeDaysAgo题目描述给出一个数字串,问有多少子段满足,可以以某种方式将这个子段重排,将子段分成两个完全相同的部分。样例输入输出202303224\((1,6)(1,8)(2,7)(7,8)\)都可以满足条件分析如果要满足某一个字段可以被分为两个相同的部分,则不......
  • React 井字棋
    React井字棋参考React的文档,用React搞个井字棋。代码实现主要还是参考的文档,不过也在原有的基础上也做了点优化和美化。原型先看原型的构成(其实是最终做完的效果,暂且当原型用):且页面的HTML结构和CSS样式已经完成:<!DOCTYPEhtml><html><head><metacharset="UTF......
  • threejs_交互_鼠标点击_添加物体_删除物体
    click点击添加物体,shirft+click点击删除物体<!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <title>three.jswebgl-interactive-voxelpainter</title> <metaname="viewport"conten......
  • React的行内样式与CSS
    如何为组件添加CSS的class?传递一个字符串作为className属性:render(){return<spanclassName="menunavigation-menu">Menu</span>}CSS的class依赖组件的props或state的情况很常见:render(){letclassName='menu';if(this.props.isActive)......