vue-3d-model 简单实现

最新推荐文章于 2024-03-23 09:43:57 发布

接着奏乐接着舞

最新推荐文章于 2024-03-23 09:43:57 发布

阅读量276

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/a378113472/article/details/130962392

版权

    <ModelObj
      :width="1600"
      :height="360"
      src="http://10.10.9.98:7006/gateway/temp/1111.obj"
      mtl="http://10.10.9.98:7006/gateway/temp/1111.obj"
      :smoothing="true"
    ></ModelObj>
    dae不显示 暂时不知道原因
    <ModelCollada
      :width="1600"
      :height="360"
      src="/static/newFile.dae"
      mtl="/static/newFile.dae"
      :smoothing="true"
    />

    <ModelGltf
      :width="1600"
      :height="360"
      src="/static/test.gltf"
      mtl="/static/test.gltf"
      :smoothing="true"
    ></ModelGltf>
    <ModelPly
      :width="1600"
      :height="360"
      src="/static/sun2.ply"
      mtl="/static/sun2.ply"
      :smoothing="true"
    ></ModelPly>
    <ModelStl
      :width="1600"
      :height="360"
      src="/static/ces.stl"
      mtl="/static/ces.stl"
      :smoothing="true"
    ></ModelStl>
    fbx
    <ModelFbx
      :width="1600"
      :height="360"
      src="/static/sun.fbx"
      mtl="/static/sun.fbx"
      :smoothing="true"
    ></ModelFbx>

<script>
import {
  ModelObj,
  ModelThree,
  ModelFbx,
  ModelCollada,
  ModelStl,
  ModelPly,
  ModelGltf
} from "vue-3d-model";

  components: {
    commonTable,
    searchForm,
    printDialog,
    copyDialog,
    ModelObj,
    ModelThree,
    ModelFbx,
    ModelCollada,
    ModelStl,
    ModelPly,
    ModelGltf
  },

  data() {
    return {

      lights: [{
        type: 'HemisphereLight',
        position: { x: 0, y: 1, z: 0 },
        skyColor: 0xffffff,
        // groundColor: 0xFF0000, // 此代码为灯光后颜色
        intensity: 1,
      },
      {
        type: 'DirectionalLight',
        position: { x: 1, y: 1, z: 1 },
        color: 0xffffff,
        intensity: .8,

      }],