Démarrer avec PlayCanvas

Pour commencer, rendez-vous sur https://playcanvas.com/user/the8thwall et créez un exemple de projet :

• Kit de démarrage Exemples de projets

  • Kit de démarrage pour le suivi d'images : Une application pour vous aider à créer rapidement des applications de suivi d'images dans PlayCanvas.
  • Kit de démarrage pour le suivi du monde : Une application pour vous aider à créer rapidement des applications de suivi du monde dans PlayCanvas.
  • Kit de démarrage des effets de visage : Une application qui vous permet de créer rapidement des applications effets de visage dans PlayCanvas.
  • Kit de démarrage effets de ciel : Une application qui vous permet de créer rapidement des applications effets de ciel dans PlayCanvas.
  • Kit de démarrage pour le suivi des mains : Une application pour vous aider à créer rapidement des applications de suivi des mains dans PlayCanvas.

• Autres exemples de projets

  • Suivi du monde et effets de visage : Un exemple qui illustre comment basculer entre le suivi du monde et les effets de visage dans un même projet.
  • Échange de couleur : Une application pour vous permettre de créer rapidement des applications de suivi du monde AR qui incluent une interface utilisateur simple et un changement de couleur.
  • Échange de décor : Une application pour vous aider à créer rapidement des applications de suivi du monde AR qui changent de décor.
  • Échange de caméra : Une application qui montre comment basculer entre les effets de visage de la caméra frontale et le suivi du monde de la caméra dorsale.

Ajoutez votre clé d'application

Allez dans Paramètres -> Scripts externes

Les deux scripts suivants doivent être ajoutés :

• https://cdn.8thwall.com/web/xrextras/xrextras.js
• https://apps.8thwall.com/xrweb?appKey=XXXXXX

Remplacez ensuite XXXXXX par votre propre clé d'application unique obtenue auprès de la console 8th Wall.

Activer la fonction "Transparent Canvas" (toile transparente)

1. Allez dans Paramètres -> Rendu.
2. Assurez-vous que l'option "Transparent Canvas" est cochée .

Désactiver "Préférer WebGL 2.0"

1. Allez dans Paramètres -> Rendu.
2. Assurez-vous que l'option "Prefer WebGL 2.0" n'est pas cochée.

Ajouter xrcontroller.js

Les exemples de projets PlayCanvas sur 8th Wall sont fournis d'un objet de jeu XRController. Si vous commencez avec un projet vierge, téléchargez xrcontroller.js à partir de https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ et attachez-la à une entité de votre scène.

NOTE : Uniquement pour les projets SLAM et/ou Image cible. xrcontroller.js et facecontroller.js ou layerscontroller.js ne peuvent pas être utilisés simultanément.

Option	Description
désactiver le suivi du monde	Si c'est le cas, désactivez le suivi SLAM pour plus d'efficacité.
matériau d'ombre	Matériau que vous souhaitez utiliser comme récepteur d'ombre transparent (par exemple pour les ombres au sol). En règle générale, ce matériau sera utilisé sur un plan de masse positionné à (0,0,0)

Ajouter le fichier layerscontroller.js

Les exemples de projets PlayCanvas 8th Wall sont fournis d'un objet de jeu FaceController. Si vous commencez avec un projet vierge, téléchargez layerscontroller.js à partir de https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ et attachez-la à une entité de votre scène.

NOTE : Uniquement pour les projets avec effet de ciel. layerscontroller.js et facecontroller.js ou xrcontroller.js ne peuvent pas être utilisés simultanément.

Ajouter facecontroller.js

Les exemples de projets PlayCanvas 8th Wall sont fournis d'un objet de jeu FaceController. Si vous commencez avec un projet vierge, téléchargez facecontroller.js à partir de https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ et attachez-le à une entité de votre scène.

NOTE : Uniquement pour les projets avec effet de visage. facecontroller.js et xrcontroller.js ou layerscontroller.js ou handcontroller.js ne peuvent pas être utilisés simultanément.

Option	Description
headAnchor	L'entité à ancrer à la racine de la tête dans l'espace mondial.

Ajouter handcontroller.js

Les exemples de projets PlayCanvas 8th Wall sont peuplés d'un objet de jeu HandController. Si vous commencez avec un projet vierge, téléchargez handcontroller.js à partir de https://www.github.com/8thwall/web/tree/master/gettingstarted/playcanvas/scripts/ et attachez-le à une entité de votre scène.

NOTE : Uniquement pour les projets de suivi de main. handcontroller.js et xrcontroller.js ou layerscontroller.js ou facecontroller.js ne peuvent pas être utilisés simultanément.

Option	Description
mainAnchor	L'entité à ancrer à la racine de la main dans l'espace mondial.