使用Online3DViewer在页面显示3D模型 - 嵌套模式

路过君

发布于 2022-04-13 13:34:39

2K0

发布于 2022-04-13 13:34:39

文章被收录于专栏：路过君BLOG from CSDN

引入JS库

下载依赖引入three.min.js o3dv.min.js

嵌入3D视图

方法1. 使用助手函数

此方法会自动将class为online_3d_viewer的元素初始化为3D视图

<script type='text/javascript'>
	// 监听window.load事件，初始化所有class="online_3d_viewer"的元素
	OV.Init3DViewerElements ();
</script>
<div class="online_3d_viewer"
     style="width: 800px; height: 600px;"
     model="models/logo.obj,models/logo.mtl"
     camera="3,1,2,0,0,0,0,0,1"
     defaultcolor="200,0,0"
     backgroundcolor="200,200,200"
     edgesettings="on,0,0,0,1">
</div>

方法2. 使用代码

此方法可以动态的为页面嵌入3D视图

<script>
// 创建嵌套视图
let viewer = new OV.EmbeddedViewer (parentDiv, {
    camera : new OV.Camera (
        new OV.Coord3D (-1.5, -3.0, 2.0),
        new OV.Coord3D (0.0, 0.0, 0.0),
        new OV.Coord3D (0.0, 0.0, 1.0)
    ),
    backgroundColor : new OV.Color (200,200,200),
    defaultColor : new OV.Color (200, 0, 0),
    edgeSettings : {
        showEdges : true,
        edgeColor : new OV.Color (0, 0, 0),
        edgeThreshold : 1
    }
});

// 加载模型到嵌套视图
viewer.LoadModelFromUrls ([
    'models/logo.obj',
    'models/logo.mtl'
]);
</script>

<div id="div-viewer"></div>

可用参数

model: 模型文件路径,逗号分割 camera: 相机参数（eye, center, up）,逗号分割 defaultcolor: 无材质面的默认颜色 backgroundcolor: 画布背景色 edgesettings: 边显示设置（‘on’/‘off’, r, g, b, threshold angle） environmentmap:六张材质箱体图片，逗号分割