PC & Mobile

Faites votre première application Web AR en 30 minutes – Marlon Gilliam – Medium

Faites votre première application Web AR en 30 minutes - Marlon Gilliam - Medium


Très bien, une fois que vous avez ajouté votre modèle dans le dossier du projet, vous voudrez changer lemodelFile’Variable en haut du fichier pour que vous chargiez maintenant dans votre nouveau modèle. Si vous utilisez un modèle comportant des matériaux distincts, vous souhaiterez ajouter une autre variable pour le chemin d'accès du fichier au matériau, puis l'ajouter au chargeur de modèle. Enregistrez le projet et vérifiez que lorsque vous appuyez sur le modèle de votre voiture, celui-ci rebondit. Sinon, vérifiez tout le code de chargement de votre modèle, essayez-le à nouveau avec un autre modèle. Si cela ne fonctionne pas, envisagez peut-être d'utiliser un fichier .GLB. que les origines de votre fichier sont définies sur 0 et que les positions du vecteur avant sont correctes. Vous voudrez peut-être aussi vérifier l’échelle de votre modèle et ajuster le paramètrestartScale' et 'endScale’Valeur souhaitée pour obtenir l’effet de rebond correct.

Maintenant, pour que votre voiture roule!

Actuellement, lorsque vous tapez sur une surface de la scène, un nouvel objet apparaît, car nous voulons pouvoir conduire notre voiture, nous voulons seulement notre premier tap pour générer la voiture, puis tous les robinets suivants pour déplacer la voiture. Pour ce faire, nous commencerons par ajouter une valeur booléenne en haut de notre document à stocker lorsque la voiture aura été créée. Donc, pour cela, nous créons un let appelé «carSpawned» et le fixons à false.

Maintenant, dirigez-vous vers la fonction 'placeObjectTouchHandler' et appelez la fonction 'placeObject' changez le code comme suit.

Sauvegardez à nouveau et vérifiez que maintenant, après la création d'une voiture, le ruban adhésif déplace la voiture à la position souhaitée. Vous remarquerez cependant que plus vous appuyez, plus la voiture va vite. En effet, notre interpolation de position utilise actuellement le minutage fixé à partir du rebond des objets dans l’animation. Pour résoudre ce problème, nous allons régler notre interpolation afin de déplacer la voiture à une vitesse constante en fonction de la distance à parcourir.

Créez une nouvelle variable en haut du fichier nommée ‘millisPerMeter’Et réglez-le sur 100. Modifiez ensuite votre code comme suit. Ici, vous voulez tester les changements et voir à quelle vitesse votre voiture se déplace. Vous pouvez facilement ralentir la voiture en augmentantmillisPerMeter’Et l’accélérer en le diminuant. Tout ce que nous faisons ici consiste à obtenir la distance entre la position des voitures et la position cible, puis à utiliser cette distance avec 1 représentant un mètre.

Ok, donc vous avez une voiture et elle se déplace un peu mieux maintenant, mais elle reste en place à n'importe quelle rotation lorsque vous faites cela, ce que, la dernière fois que j'ai vérifié, ce n'est pas ainsi que les voitures roulent. Grâce à Three.js, résoudre ce problème est simple car ils ont une fonction intégréeRegarder' une fonction. Ajoutez simplement la ligne de code suivante à votre application et vous aurez terminé!

Et nous avons fini! Merci de votre lecture et j'espère que vous êtes satisfait de votre nouvelle application Web AR!

Si vous avez des commentaires ou des suggestions sur le projet, faites-le moi savoir!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close