首页 > 其他分享 >three-gltf-viewer 3d模型展示

three-gltf-viewer 3d模型展示

时间:2024-05-23 19:07:33浏览次数:29  
标签:viewer 模型 three import gltf 3d

因为工作需要开发了一个通用的3d模型模板展示 

内容包含背景颜色、环境光、自动旋转、以及资源监视器 ,只需要把模型传进去即可。然后我发布到npm上面。

目前更新到了1.0.5,喜欢的话就去下载吧。 需要源码的联系我。

 

yarn add three-gltf-viewer  main.js使用

import gltfViewer from "three-gltf-viewer"

import "three-gltf-viewer/lib/style.css"

app.use(gltfViewer)

import modelUrl from "@package/gltf-viewer/assets/models/machine.glb" <template>   <div style="height:100%; width: 100%;">     <gltfViewer :modelUrl="modelUrl"  /> 示例图如下

 

 

标签:viewer,模型,three,import,gltf,3d
From: https://www.cnblogs.com/shuangzikun/p/18209177

相关文章

  • three.js之动画
    动画<canvasid="mainCanvas"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":"./js/jsm/"......
  • three.js基础之Material
    MeshBasicMaterial<canvasid="mainCanvas"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":"./js......
  • three.js之加载模型
    加载各种模型<canvasid="mainCanvas"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":"./js/jsm/"......
  • three.js之Group
    Group<canvasid="mainCanvas"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":"./js/jsm/"......
  • The three little pigs
    Onadarkandwindynight,I,thebigbadwolf,embarkedonmyhuntforthethreelittlepigs.Followingtheirdistinctscent,Itraversedthedenseforestinsearchoftheirwhereabouts.Eventually,Istumbleduponthefirstpig'sstrawhouseinan......
  • threejs饼图
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Cake</title>......
  • 利用three.js七步实现VR看房
    这里我用的是vue框架:首先下载安装three.js=>npminstallthree;然后import*asTHREEfrom'three'导入组件中;接下来就可以在组件中编写我们的three.js代码创建场景:constscene=newTHREE.Scene()创建相机:constcamera=newTHREE.PerspectiveCamera( 70,//视角度......
  • three.js基础之mesh属性
    mesh之位置、缩放、平移、旋转属性<canvasid="mesh-properties"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":&quo......
  • three.weapp.js提示applyMatrix4 is not a function
    最近做项目使用three.weapp,因为是微信版的three,所以删减了好多方法。在使用applyMatrix4时报了 applyMatrix4isnotfunction的错误。解决方法简单,找thee里面有的方法代替。先console.log查看下three.weapp里面的Group prototype有什么可以看到有一个applyMatrix方法。......
  • three.js基础之小案例
     静态场景<canvasid="mainCanvas"></canvas><scripttype="importmap">{"imports":{"three":"./js/build/three.module.js","three/addons/":"./js/jsm/"......