Vue 3d loaderVue 3d loader
指南
  • English
  • 简体中文
GitHub
指南
  • English
  • 简体中文
GitHub
  • 指南

    • 介绍
    • 快速上手
    • 事件
    • API
    • 捐助
  • 样例

    • 加载一个模型
    • 加载多个模型并单独设置模型位置
    • 加载JSON模型
    • 加载Draco压缩模型
    • 设置场景高宽
    • 材质及纹理
    • 背景颜色及透明度
    • 交互控制
    • 旋转模型
    • 事件
    • 灯光
    • 相机位置及旋转
    • 并行加载多模型
    • 标注
    • 播放/停止动画
    • 开启阻尼
    • 加载进度
    • 控制相机垂直/水平旋转
    • 开启坐标轴及网格
    • 设置摄像头向内外的距离
    • 点光源跟随相机移动
    • 克隆相同模型

背景颜色及透明度

This text is on the back of the model
<template>
  <div class="content">
    <div class="text">This text is on the back of the model</div>
    <div class="model">
      <vue3dLoader
        filePath="/models/gltf/DamagedHelmet.gltf"
        :backgroundColor="'#00ffff'"
        :backgroundAlpha="0.5"
        :height="600"
        :width="600"
        outputEncoding="sRGB"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { vue3dLoader } from "vue-3d-loader";
</script>
<style>
.content {
  position: relative;
}
.text,
.model {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.text {
  z-index: 0;
  font-size: 60px;
  width: 100%;
  text-align: center;
}
.model {
  z-index: 100;
}
</style>
在 GitHub 上编辑此页
上次更新: 2022/10/30 21:09
Contributors: Tony Tao
Prev
材质及纹理
Next
交互控制