Comment afficher le modèle 3D (fichier .glb) dans le projet Vue ?

Selon les exigences mises en avant par l'entreprise, il est nécessaire de réserver une place pour afficher le fichier .glb dans le projet d'arrière-plan. Je n'y ai jamais touché auparavant. Les trois. Il n'est pas possible d'ajouter des événements. Après tout, nous n'avons pas pensé à three.js, nous avons donc cherché sauvagement et trouvé plusieurs plugins vue spécialement utilisés pour afficher des modèles 3D, tels que : vue-model-viewer, vue- 3d - model, (vous pouvez le trouver en cherchant sur le npm official L'effet d'affichage par défaut de ces deux plug-ins est le même, et la rotation du modèle peut être contrôlée par la souris par défaut, mais une série d'opérations telles que le zoom ne suffisent pas, peut-être que cela peut être satisfait, mais je Je ne l'ai pas étudié attentivement. Voici le point important, <model-viewer></model-viewer>, ce plugin est encore relativement fort @google/model-viewer - npm (npmjs.com) https://www. npmjs.com/package/@google/ model-viewer est l'adresse npm, vous pouvez vérifier les détails

Instructions:

1. Installer

npm install [email protected] 
npm install @google/[email protected]

2. Partie code

une partie de modèle

<template>
  <div class="hello">
    <model-viewer style="width: 500px;height: 500px;"  alt="Ready Player Me Avatar" 
      camera-controls 
      src="https://api.readyplayer.me/v1/avatars/6185a4acfb622cf1cdc49348.glb" shadow-intensity="1"
      touch-action="pan-y">
  </model-viewer>
  </div>
</template>

b. partie de script

<script>
import ModelViewer from '@google/model-viewer'   //引入组件
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  components:{
    ModelViewer  //注册组件
  }
}
</script>

C. Effet

 

d. Explication :

Un avertissement peut apparaître lors de l'exécution, ignorez-le , le three.js que j'ai installé est la version 0.154.0 et la dernière version est la 0.155.0, mais cette version de three.js ne prend pas en charge l'utilisation des plug-ins de la version 3.2.1, donc selon version à installer !

Ce qui précède est toutes les informations précieuses de vue affichant des modèles 3D, j'espère que cela vous sera utile !