3D im Web

Formate

GLB / glTF

GLB ist die Binary Version von glTF 2.0. Das Format wird z.B. von Facebook für 3D Bilder verwendet. glTF ist quasi Standard Format für

https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2 Von Blender nach Three JS als glTF
https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials/ - Facebook Manual
https://www.khronos.org/blog/art-pipeline-for-gltf - Übersicht über den Workflow nach glTF

glTF - Spezifikation

The glTF format supports the following textures for the Metallic-Roughness PBR model:

   Base Color
   Metallic
   Roughness
   Normal
   Ambient Occlusion
   Emission

The format does expect the textures in a specific format, however. The Base Color, Normal, and Emission textures are saved as individual files, preferably a PNG as the format is lossless. The Ambient Occlusion, Roughness, and Metallic textures are saved in a single channel-packed texture to reduce the number of texture loads. The textures need to be packed into the channels of your texture as follows:

   Red: Ambient Occlusion
   Green: Roughness
   Blue: Metallic

Going forward, I will refer to this channel-packed texture as the ORM texture for Occlusion, Roughness, and Metallic.

Libraries

Three JS

https://www.youtube.com/watch?v=uzkedMF-l4Q&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM
https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2

Aktuell beste Library für anspruchsvolle Aufgaben (Stand 2019)

Fake 3D / 360 Grad

Oft reicht auch ein 360 Grad Skript das mehrere Bilder in unterschiedlichen Winkeln der Reihe nach oder interaktiv zeigt.

https://scaleflex.github.io/js-cloudimage-360-view/