3d-model-preview

3d model preview base on vue-3d-model

Usage no npm install needed!

<script type="module">
  import dModelPreview from 'https://cdn.skypack.dev/3d-model-preview';
</script>

README

vue-3d-model

展示3d模型的组件,基于 MIT 开源协议的 vue-3d-model 功能增强

功能正在研发中,部分功能并未完工

增强功能包括

  • 可选更多的控制器,TrackballControls
  • 可自动优化模型定位,可设置默认展示角度
  • 可选更多的相机,比如视差相机(适用移动端)
  • 更强的展示效果,比如 FXAA减少锯齿
  • 消灭了一些bug,比如 Z-flating 问题等
  • 可选 线框、着色、线框着色 三种展示模式
  • 可配置模型展示背景
  • 可重置模型摆放
  • 模型加载loading icon
  • 新增更多的模型类型支持 ctm/fbx

Example

Install

using npm

npm install 3d-preview-model --save

Or using script tag for global use

Usage

Documents

props

prop type default example
src string - './exapmle.obj'
width number - 300
height number - 300
env string - static/texture/Temp/
position object { x: 0, y: 0, z: 0 } { x: 100, y: 20, z: -10 }
rotation object { x: 0, y: 0, z: 0 } { x: Math.PI / 2, y: 0, z: - Math.PI / 4 }
cameraPosition object { x: 0, y: 0, z: 0 } { x: 1, y: 2, z: -3 }
cameraRotation object { x: 0, y: 0, z: 0 } { x: 3, y: 2, z: -1 }
scale object { x: 1, y: 1, z: 1 } { x: 2, y: 2, z: 3 }
lights array -
backgroundColor number/string 0xffffff 0xffffff/'#f00'/'rgb(255,255,255)'
backgroundAlpha number 1 0.5
controlsOptions object - see OrbitControls Properties
crossOrigin string anonymous anonymous/use-credentials
gammaOutput boolean false true/false
glOptions object { antialias: true, alpha: true } see WebGLRenderer Parameters

events

event
on-mousedown
on-mousemove
on-mouseup
on-click
on-load
on-progress
on-error

Model Format Support

model format component tag
obj <model-obj>
json <model-three>
stl <model-stl>
dae <model-collada>
ply <model-ply>
gltf(2.0) <model-gltf>
ctm <model-ctm>
fbx <model-fbx>

Browser Support

Modern browsers and IE 11.

You can click on this for more information.

LICENSE

MIT