ThingOrigin.js

案例展示 ​

在场景中添加视频面板

<template>
  <div id="TO"></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  //初始化场景
  let TO = new ThingOrigin('videoTest', document.getElementById('TO'), {
    scene: {
      ground: {//地面
        active: false,
      },
    },
    helper: {
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    },
  }
  );

  // 创建视频元素
  const videoElement = document.createElement('video');

  // 动态获取基础路径并设置视频源
  videoElement.src = `${import.meta.env.BASE_URL}video/weld.mp4`;
  videoElement.autoplay = true;
  videoElement.loop = true;

  //创建视频面板
  const video = TO.model.initVideoPlane(
    videoElement, //video Dom元素
    {
      modelName: "videoPlane-" + new Date().getTime(), //模型名称
      base: {
        width: 250, //宽度
        height: 200, //高度
      },
      position: { //位置
        x: 1,
        y: 1,
        z: 1,
      },
      scale: {//缩放
        x: 1.2,
        y: 1,
        z: 1,
      },
      rotation: {//旋转
        x: -0.4,
        y: 0,
        z: 0,
      },
    }
  );
  //添加到场景
  TO.scene.add(video);
});
</script>

<style scoped>
#TO {
  width: 100%;
  height: 400px;
  position: relative;
}
</style>

API 介绍 ​

model.initVideoPlane ​

方法签名返回值描述
initVideoPlane(dom: HTMLVideoElement, modelInfo?: modelInfoParams)Object3D添加视频面板

参数说明：

参数名说明类型必填默认值
domvideo 标签HTMLVideoElement是-
modelInfo模型参数modelInfoParams--