Comment créer une application de vitrine VR à l’aide du multijoueur

Comment créer une application de vitrine VR à l’aide du multijoueur

Si vous vous demandez comment créer votre propre showroom VR, ce guide est fait pour vous. Il existe de nombreuses façons intéressantes de créer une vitrine VR – par exemple, avec quelques scripts, vous pouvez créer votre propre salle de cinéma virtuelle ou une table de poker virtuelle où vous passez du temps avec des amis. Construire une vitrine VR n’est pas difficile du tout, et ce guide vous guidera à travers les étapes.

Pour ce guide, nous utiliserons Archilogic et 3D.io – Archilogic peut également convertir vos plans d’étage 2D en 3D, mais ce n’est pas un service gratuit – cependant, ils fournissent votre plan de premier étage gratuitement. Vous pouvez le faire dans ce guide, mais il est fortement recommandé que vous appreniez à créer vos propres modèles de plan d’étage 3D.

exigences de base :

• Plan d’étage 2D qui sera converti en 3D
• Si vous souhaitez importer vos propres meubles, veuillez utiliser des modèles 3D.
• Connaissance de la programmation A-Frame + HTML.

Convertir des plans d’étage 2D en 3D via Archilogic (pour les artistes non 3D)

1. Votre première étape consiste à créer ou à obtenir un plan d’étage 2D. Vous pouvez le faire vous-même dans un certain nombre de programmes, tels que RoomSketcher, SketchUp, Homebyme, etc. Alternativement, vous pouvez en récupérer un sur Internet en recherchant sur Google « plan d’étage 2D » pour les images.
2. Ensuite, vous allez convertir le plan d’étage 2D en 3D. Rendez-vous sur le tableau de bord Archilogic, créez un compte et commandez un modèle 3D de base – votre premier modèle est gratuit, alors assurez-vous que vous aimez vraiment votre plan d’étage 2D.
3. Après avoir téléchargé le plan d’étage 2D, Archilogic vous enverra le modèle 3D dans les 24 heures, qui peut maintenant être importé dans le kit de création 3D.IO.

(Facultatif) Exportez des plans d’étage 3D à partir de SketchUp pour Archilogic / 3D.IO

1. Si vous êtes familier avec SketchUp (Anciennement Google SketchUp), l’exportation de plans d’étage 3D pour une utilisation dans Archilogic est très simple. Si vous êtes nouveau sur SketchUp, il est vraiment facile à utiliser, et je vous recommande de l’apprendre si vous souhaitez créer de superbes plans d’étage 3D à partir de zéro.
2. Supposons que vous ayez créé un plan d’étage 3D dans SketchUp ou que vous en ayez téléchargé un à partir du référentiel 3D (Une collection de modèles SketchUp soumis par les utilisateurs)Quoi que vous ayez, vous devrez changer les unités de votre modèle en Mètre afin qu’Archilogic puisse le lire correctement.
3. Ensuite, vous devriez probablement également supprimer faire face Le polygone du toit vous permet de voir l’intérieur du modèle 3D d’en haut, tout en conservant le plafond lorsque vous visualisez le modèle de l’intérieur.
4. Dans SketchUp, les modèles sont exportés sous forme de fichiers OBJ, le seul type de fichier pouvant être importé dans Archilogic.Vous devez également décocher « Exporter recto-verso » Dans les options « Exporter » (cela remonte à votre toit).
5. Si vous avez une version plus ancienne ou non Pro de SketchUp et que vous ne pouvez pas exporter directement vers OBJ, Vous pouvez exporter votre modèle en tant que fichier DAE et l’importer dans quelque chose comme Blender pour l’exporter en OBJ.
6. Dans tous les cas, une fois que vous avez réellement exporté l’OBJ, vous pouvez accéder au tableau de bord Archilogic et choisir d’importer le modèle 3D.

Créez votre salle VR

Ada

1. Une fois que vous avez le modèle/plan 3D dans Archilogic, vous pouvez accéder à l’éditeur Archilogic Furnishing pour placer des meubles dans votre pièce. Si vous n’aimez aucun meuble et que vous souhaitez importer le vôtre, vous pouvez également importer des modèles 3D à partir de programmes tels que Modèles 3D, SketchUp, Blender, 3ds Max, etc. Archilogic a une documentation sur la façon d’importer des modèles 3D à partir de ces programmes.
2. Si vous créez réellement une vitrine VR, vous pouvez continuer et créer des signets de caméra dans Archilogic – ceux-ci concentreront la caméra sur les parties « importantes » de votre modèle, comme si vous montriez une maison. Cependant, si vous suivez ce guide uniquement pour créer votre propre salle de réalité virtuelle, vous n’aurez besoin que de la vue à la première personne par défaut.
3. Une fois que vous avez mis en page/modifié le modèle 3D à votre goût, il est temps de le transformer en une présentation VR.
4. Accédez à 3D.io AppCreator et cliquez sur « Créer une copie » dans le coin supérieur droit – cela clonera le modèle actuel et en créera un nouveau.
5. Dans la zone Importer une scène Archilogic, collez le code de chaîne de scène/modèle 3D spécifique que vous avez importé précédemment dans Archilogic. Il sera automatiquement importé dans la scène avec toutes vos modifications de meubles, signets de caméra, etc.
6. Après avoir importé la scène, commencez à la personnaliser entièrement à votre guise – ajoutez une « image d’arrière-plan » (En gros, à quoi ça ressemble à l’extérieur de la fenêtre).
7. Maintenant, la vraie puissance de tout cela vient de l’éditeur A-Frame/HTML. Vous pouvez y accéder en cliquant sur l’onglet Code dans App Creator. Ici, vous incluez ce que vous avez codé en A-Frame/HTML, comme les tables de poker en direct, les écrans de cinéma, etc. Vous pouvez devenir vraiment compliqué par cela.
8. Si vous souhaitez que votre VR Showcase soit « multijoueur », par exemple, que vos amis puissent jouer à votre table de poker ou regarder un film avec vous, vous aurez besoin d’un code A-Frame multijoueur en direct. Si vous avez suffisamment d’expertise, vous pouvez en créer un vous-même ou essayer l’un des codes A-Frame suivants qui prennent en charge les jeux multijoueurs :

Sauf que Lance.GG est très avancé et plus avancé pour les développeurs de jeux réels, les AFrames multijoueurs mettront essentiellement des « avatars » dans votre vitrine VR pour chaque personne connectée – ils seront généralement personnalisables par vous. Les « entités » sont représentées dans le code AFrame.

Lisez les instructions de chacun pour voir ce qui vous convient le mieux – généralement, vous mettez simplement le code A-Frame dans la section de code 3D.Io, mais vous devrez peut-être également exécuter un serveur sur votre ordinateur pour que vos amis puissent se connecter.

C’est ça!