3D-ThingJS,three.js,unity 3D

一、架构图

 

 

二、Three.js、ThingJS、Unity3D

Three.js

ThingJS

 

 

 

 

 

 

 

 

 

 

 

 调研reactNative加载3D效果

一、理论介绍

OpenGL 是用于计算机图形绘制的编程接口标准,支持不同平台上的图形绘制。

OpenGL ES 针对于嵌入式设备(是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统:如手机游戏机等)图形开发的标准OpenGL ES。

WebGL 是一项用来 在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之交互的技术。 随着个人计算机和浏览器的性能越来越强,我们能够在Web上创建越来越精美、越来越复杂的3D图形。

 OpenGL ES 可以说是 OpenGL 为了满足嵌入式设备需求而开发一个特殊版本,是其一个子集;而 WebGL,是为了网页渲染效果,将 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个JavaScript绑定得到

Three.js 是一款运行在浏览器中的 3D 引擎,它是对webGL的封装,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。

react-three-fiber是Three.js进一步封装用于react.js前端架构。

 

 

二、RN加载3D模型

方案一:

在rn中直接编写代码加载3D模型

实现方案

1、通过expo-three组件库去加载3D模型

2、通过react-three-fiber组件库去加载3D模型

结果:都不能很好的支持

1、最新的版本快速开始都不能运行

2、版本回退可以显示,但有一些事件不能很好的支持

https://github.com/expo/expo-three/issues/257

https://github.com/pmndrs/react-three-fiber/issues/2171

 

方案二: 
rn通过webview去加载3D。 可行✅

 

 

参考:

https://zhuanlan.zhihu.com/p/216100434

https://www.cnblogs.com/thingjs/p/13925390.html

posted @ 2022-02-25 10:47  尘恍若梦  阅读(843)  评论(0编辑  收藏  举报