对标效果:https://anatomy.3dbody.com/home/soft-detail?id=60
实现3D模型渲染展示,实现3D动画播放,实现3D交互。
对标效果大概率为three.js方式实现(可web、Android、iOS跨平台)。
针灸大师App:RectNative+unity3d;
3Dbody剖析:three.js+RN/Flutter。
移动客户端上如何实现
-
Android
- SceneView
只支持glb
格式的模型文件。
Andorid使用Scene Viewer发布3D模型 - Sceneform
过时。 - Fliament
Google推出的轻量级跨平台实时渲染引擎,支持Android、iOS、Linux、MacOS、Windows
系统,提供C++、Java、JavaScript API。
Google Filament跨平台实时PBR渲染引擎
android filament入门,GLB和GLTF模型查看器
FilamentAndroid
- SceneView
-
iOS
- SceneKit
SceneKit是苹果公司对Metal或OpenGL封装的3D渲染框架,可以快速3D渲染项目的项目,有点类似js中ThreeJs。轻松添加动画、物理模拟、粒子效果和逼真的物理渲染。
blender 3.4.1
转换其它格式文件出来无法被正确识别,需要更高的版本才可以。
- SceneKit
-
跨平台
-
Three.js
Three.js中文网
JavaScript 3D动画库three.js入门篇
实现threejs模型交互:快速添加点击事件 - modelviewer
-
Goole-AR Core-通过 <model-viewer> 增强现实
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <style> .full-width { width: 800px; height: 800px; margin: auto; } </style> </head> <body> <div> <model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb" ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz" alt="A 3D model of an astronaut" class="full-width" ar auto-rotate camera-controls> </model-viewer> </div> </body> </html>
-
Three.js