three-gltf-viewer

support .glb/ .gltf file

This template should help get you started developing with Vue 3 in Vite.

install

yarn add  three-gltf-viewer
npm i three-gltf-viewer

use

-----main.js -----

import gltfViewer from "three-gltf-viewer"
import "three-gltf-viewer/lib/style.css"
app.use(gltfViewer)

-----.vue -----

<script setup>
import { ref } from "vue"
import modelUrl from "@package/gltf-viewer/assets/models/machine.glb" //测试模型
const showAside = ref(true) //是否显示侧边栏
const guiSettingData = {
  showGui: true, //默认显示gui
  expangdGui: true, // 是否展开gui
  background: true, //是否显示背景  背景hdr 不显示则显示bgcolor
  backgroundColor: '#031935', //背景颜色  当background===false显示
  autoRoate: true, // contorls autoRoate 
  grid: false,//是否启用网格
  environmentItem: 'nature',  //可选 ['nature', 'Snowy Forest', 'Royal Esplanade', 'Industrial Sunset Puresky', 'venice_sunset', 'studio_garden']
  toneMappingItem: 'None',  //可选  ['None', 'Linear', 'ACESFilmic', 'Reinhard', 'CineonTone'] 
  exposure: 1.0,
  ambientLight: true,  // 可以选择配置光源 最多两个最少一个
  directionalLight: false,  // 可以选择配置光源 最多两个最少一个
  ambientLightColor: '#ffffff',
  ambientLightIntensity: 0.5,
  directionalLightColor: '#ffffff',
  directionalLightIntensity: 0.5,
}
</script>

<template>
  <div style="height:100%; width: 100%;">
    <gltfViewer :modelUrl="modelUrl" v-model="showAside" :guiSettingData="guiSettingData">
      <template #header>
        <div style="color: white;">header信息</div>
      </template>
      <template #aside-left>
        <div style="color: white;">aside信息</div>
      </template>
      <template #aside-right>
        <div style="color: white;">aside信息</div>
      </template>
    </gltfViewer>
  </div>
</template>