3D-Modell in unserem Onlineshop

Three.js Tutorial: Installation

Seit Jahren verwendet wir in unserem Atelier für Virtual & Augmented Reality für 3D im Internet die JavaScript-Bibliothek Three.js.

Sie haben es eilig? Dann speichern Sie diesen Blogartikel von R23 als PDF

Brauchen Sie den Inhalt dieses Artikels “Three.js Tutorial: Installation” schnell und bequem? Dann speichern Sie ihn doch einfach als PDF!

Auch in unserem zukünftigen Onlineshop, der zurzeit in der Entwicklungsphase ist, verwenden wir für die Darstellung von 3D-Modellen Three.js.

Auf r23.de verwenden wir einen Onlineshop, der dringend ein Update benötigt. Wir entwickeln unseren neuen selber und haben nun die Betaphase erreicht. Eine Demo Installation können Sie bereits hier sehen:

Verwandeln Sie Ihren Commerce mit 3D-Visualisierung von R23

Ein Maskottchen / Charakter transportiert die Botschaft Ihrer Dienstleistungen und Produkte nach außen. Darüber hinaus kann ein Maskottchen / Charakter für einen Wiedererkennungswert sorgen.

Charakterdesign / Maskottchen

Wir bieten Ihnen Maskottchen / Charakter Design für Ihre Marke, in 3D oder als Zeichnung. Ihre einzigartige Sympathiefigur.

Unser in der Entwicklung

Unser Onlineshop in der Entwicklung

https://oos-shop.de/shop/

Bei diesem 3D-Modell verwenden wir für die Darstellung Three.js. Und hatten leichte Probleme mit dem Update und dem 3D-Modell. Vor diesem Hintergrund muss eine Lösung für zukünftige Wartungen her.

Einleitung / Hinweis

Dieses Tutorial ist als praktischer Leitfaden gedacht und behandelt keine theoretischen Hintergründe. Für die Richtigkeit der Inhalte dieses Tutorials gebe ich keinerlei Garantie.

Dieses Tutorial entstand am 30.07.2022. Ich verwende Three.js in der Version r143 unter Windows 11. Das gezeigte 3D-Modell basiert auf den glTF-Sample-Models.

Was ist Three.js?

ist eine browserübergreifende JavaScript-Bibliothek und Anwendungsprogrammierschnittstelle (API) zur Erstellung und Anzeige animierter 3D-Computergrafiken in einem Webbrowser mit WebGL. Der Quellcode wird in einem Repository auf GitHub gehostet.

wurde erstmals von Ricardo Cabello im April 2010 auf GitHub veröffentlicht.

Links

Three.js-Beispiele
Three.js-Grundlagen
Entdecken Sie Three.js

Beliebtes Framework React Three Fiber (R3F)

React Three Fiber (R3F) ist ein React-Renderer für Three.js.

Alles, was in funktioniert, funktioniert auch in R3F ohne Ausnahme.

Es gibt keine feste Abhängigkeit von einer bestimmten Three.js-Version. R3F verpackt oder dupliziert keine einzige Three.js-Klasse. Es drückt lediglich three.js in JSX aus: wird zu new THREE.Mesh(), und das geschieht dynamisch.
Es gibt keinen zusätzlichen Overhead. Die Komponenten nehmen an einem einheitlichen Renderloop außerhalb von React teil. R3F übertrifft Three.js bei der Skalierung aufgrund der Scheduling-Fähigkeiten von React.

React Three Fiber (R3F) Links

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

Einige Beispiele für Projekte, die mit React Three Fiber erstellt wurden, sind Let Girls Dream, Gucci’s 1955 Horse Bit Bag und Gucci’s 24 Hour Ace.

Die IDE: Visual Studio Code

Visual Studio Code ist ein leichtgewichtiger, aber leistungsstarker Quellcode-Editor, der auf Ihrem Desktop läuft und für Windows, macOS und Linux verfügbar ist. Er bietet integrierte Unterstützung für JavaScript, TypeScript und Node.js und verfügt über ein umfangreiches Ökosystem von Erweiterungen für andere Sprachen und Laufzeiten (wie C++, C#, Java, Python, PHP, Go, .NET).

Visual Studio Code Link

Visual Studio Code

Visual Studio Code Erweiterung: Three-JS-Snippets

Dies ist eine VSCode-Erweiterung, die Three.JS-Snippets bereitstellt, um Ihre Three.js-Entwicklung zu beschleunigen. Snippets gibt es für das beliebte Framework React Three Fiber (R3F) und Three.js selbst, für Typescript und Javascript.

Genauer gesagt ist es die einzige Erweiterung auf dem Markt, die allgemeine Funktionen für Three.JS bereitstellt, sowohl für R3F als auch für die Kernbibliothek. Die Snippets enthalten sowohl anfängliche Starterfunktionen als auch allgemeine Konstruktoren/Objekte.

Three-JS-Snippets Links

https://marketplace.visualstudio.com/items?itemName=aerokaido.three-js-snippets

3D-Modell in unserem

3D-Modell in unserem Onlineshop

https://oos-shop.de/shop/index.php?content=product_info&products_id=3

Unser Ziel ist es Sie dabei zu unterstützen wettbewerbsfähig und innovativ zu bleiben:

Wir sind Open Source getrieben
GitHub
https://github.com/r23

Unser Demo-
https://oos-shop.de/shop/

Ich möchte Sie gerne kennenlernen.

Sollten Sie Fragen und Anregungen haben, sprechen Sie mich gerne an. Ich bin für Sie da.

Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen uns damit eine große Freude!

Wie können wir Ihnen helfen?

Wir unterstützen Sie bei der Umsetzung Ihres Augmented Reality (AR) oder Virtual Reality (VR) Projektes! Ob Produktfotografie, 3D-Scan-Service, 3D-Visualisierung oder fertige 3D-Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wenn Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen (Fotos, Zeichnungen, Skizzen) wünschen, nutzen Sie einfach unser Anfrageformular.


Beitragsautor R23

3D-Modelle für Metaverse und Echtzeit-Anwendungen: VR, AR und mehr

Als Atelier für Metaverse Inhalte und interaktive Markenerlebnisse bieten wir Ihnen eine breite Palette an 3D-Modellen, die sich perfekt für Echtzeitanwendungen eignen. Ob Sie in eine virtuelle Welt eintauchen wollen (Virtual Reality, VR), virtuelle Objekte in die reale Welt einblenden wollen (Augmented Reality, AR) oder beides kombinieren wollen (Mixed Reality, MR) – unsere Modelle sind für alle Formen von Extended Reality (XR) optimiert. Dank unserer Expertise können Sie wertvolle Entwicklungszeit und -kosten sparen. Nutzen Sie unsere 3D-Modelle als Prototypen für Ihre XR-Erfahrungen oder integrieren Sie sie in Ihr fertiges Projekt. Wir stehen Ihnen gerne mit Rat und Tat zur Seite und sorgen dafür, dass Ihre Markenerlebnisse einzigartig und unvergesslich werden.

3D-Visualisierung
3D-Scan – Dienstleistung

Angebot anfordern


Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert