【React】尝试在React中使用three.js(react-three-fiber)

首先

这是一张备忘录。

总结

使用three.js的React库”react-three-fiber”来在React中展示3D对象。

为了这个目的,暂时进行了调查,将关键词排列起来,以防忘记。
(请注意,这只是一种可能的表达方式,其它翻译选项仍可能存在。)

环境

    codesandboxで作ったReact/TypeScript環境

目前已经出现的库

    • three

 

    • react-three-fiber

 

    react-three-drei

※从这里开始,我正在寻找并计划使用一个不同的库来进行研究。

    • react-progressbar-semicircle(円形ゲージ)

 

    • recharts (グラフ)

 

    leader-line-new, react-leader-line(要素同士を線でつないでアニメーション付ける)

进行了验证

    • オブジェクトを作って表示

 

    • カメラやオブジェクトの位置や角度の変更

 

    • 3Dモデルを自分で作る(YouTubeで説明見ながらBlenderで作成)

 

    • 3Dモデルを読み込んで表示

 

    3Dモデルの色変更、透過変更、質感変更
スクリーンショット 2021-11-10 19.17.29.png

最终

还在编辑中。
请稍作等待,直到完成。
我认为发布这样的东西是有意义的,所以暂时公开!

广告
将在 10 秒后关闭
bannerAds