[直播分享] 用 ThreeJS + React 部分实现 SpaceX UI

Posted freeCodeCamp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[直播分享] 用 ThreeJS + React 部分实现 SpaceX UI相关的知识,希望对你有一定的参考价值。


几周前,搭载两名美国宇航员的 SpaceX 龙飞船在肯尼迪航天中心发射成功,创造历史。


龙飞船的触控界面吸引了广大开发者的注意。



7.11 本周六下午 3 点 - 5 点,开发者李嘉豪将直播分享【ThreeJS + React 实践丨部分实现 SpaceX UI】,带领大家构建一个简单可交互的系统。


主要内容:

- 使用 ThreeJS 实现地球的自转

- 使用 ThreeJS 添加光照

- 使用鼠标点击操纵杆可控制视角的移动及旋转

- 视角的旋转导航球也跟随着同步旋转


嘉宾简介:

李嘉豪,22.75 年前出生于山东省,2019 年毕业于成都信息工程大学,现就职于 ThoughtWorks 成都公司,目前在自学 WebGL 及图形学相关内容。


欢迎大家在 bilibili 搜索关注 freeCodeCamp 后进入直播间交流、学习。


同时,freeCodeCamp 中文社区正在 bilibili 组织一系列技术分享活动,欢迎大家发起活动:你提交活动内容、形式,我们和你一起筹办^_^


非营利组织 freeCodeCamp.org 自 2014 年成立以来,以“帮助人们免费学习编程”为使命,创建了大量免费的编程教程,包括交互式课程、视频课程、文章等。我们正在帮助全球数百万人学习编程,希望让世界上每个人都有机会获得免费的优质的编程教育资源,成为开发者或者运用编程去解决问题。


你也想成为

freeCodeCamp 社区的贡献者吗

欢迎点击以下文章了解

✨✨


点击“阅读原文”发起活动

以上是关于[直播分享] 用 ThreeJS + React 部分实现 SpaceX UI的主要内容,如果未能解决你的问题,请参考以下文章

React引领未来用户界面——心莱科技内部直播分享会

如何将 Threejs 连接到 React?

THREEJS性能优化

threejs + vanilla js 和 react-three-fiber + create-react-app 的颜色差异

如何在threejs或react-three-fiber中加载相同的gltf模型

ThreeJS之动画交互逻辑及特效