3d-model-preview 中文文档教程

Question

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 html

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	\
json	\
stl	\
dae	\
ply	\
gltf(2.0)	\
ctm	\
fbx	\

Browser Support

Modern browsers and IE 11.

You can click on this for more information.

LICENSE

MIT