implementación vite vue3 threejs de una vitrina de modelo 3D

1. Verifique la versión npm -v y use el vite correspondiente para instalar el proyecto vue3

Necesita instalar dependencias: npm install

Ejecute: npm ejecute dev

Estructura de directorios:

2.Sitio web oficial de threejs:

3. Instale threejs

4. Prepare los materiales del modelo 3D ( Utilizo el formato glb aquí) Y las imágenes HDR, los materiales se pueden encontrar en línea de forma gratuita.

5. Vincule la identificación en App.vue, móntela y cree una instancia para su uso.

6. Cree el directorio utils en el directorio src del proyecto y cree Base3d en el script .js del directorio de utilidades

Visualización del efecto: el modelo del teléfono móvil se ha cargado en la escena y el fondo es una imagen HDR.

Visualización de funciones: los usuarios pueden deslizar la rueda de desplazamiento para acercar y alejar el modelo, y la escena se puede girar 360 grados sin puntos ciegos.