第一个Autodesk.Viewing.Viewer3D例子

最新推荐文章于 2024-10-19 11:31:59 发布

蒲小若

最新推荐文章于 2024-10-19 11:31:59 发布

阅读量5.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Autodesk.Viewing.Viewer3D 前端开发经验总结录文章标签： viewer3D

本文链接：https://blog.youkuaiyun.com/qq_39585562/article/details/83783838

前端开发经验总结录同时被 2 个专栏收录

40 篇文章

订阅专栏

Autodesk.Viewing.Viewer3D

1 篇文章

订阅专栏

本文介绍了一种使用Autodesk Viewer API在线预览3D模型的方法。通过将3D模型转换为svf格式并利用Autodesk Viewer API，可以在网页中直接展示3D模型，同时提供了工具栏和自定义按钮功能，增强了用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>viewer</title>
	<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.0/style.min.css" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/three.js/r83/three.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.0/viewer3D.min.js"></script>
	
	
	<style type="text/css">
		body{
			margin: 0;
		}
		#MyViewerDiv{
			width: 100%;
			height: 100%;
			margin: 0;
			background-color: #f0f8ff;
		}
		
	</style>
	</head>
<body>
	<div id="MyViewerDiv"></div>

<script>
	var viewer;
	
	var model_viewer = null;
	
	var options = {
		env: 'Local',
		model_src: 'http://192.168.1.25/mbcadmin/public/uploads/20180612/9b5d987e06c92c0ee8c6d78a0847ac76/3d.svf'    // 一个svf的本地地址，这个地址不可为相对路径，不然是找不到这个路径的
	};
	
	model_viewer = ViewerWithTool("#MyViewerDiv", true) // With toolbar

	Autodesk.Viewing.Initializer(options, function () {
      model_viewer.initialize()
	  
      let btnNew= new Autodesk.Viewing.UI.Button('btnNew'); //新增一个按钮
      btnNew.onClick = function (e) {
           //给按钮添加点击事件
      }
      btnNew.setToolTip('新的按钮'); //鼠标放置按钮上方时的显示
      btnNew.container.children[0].innerHTML = '若'; //按钮上显示的内容
			
      let subToolbar = new Autodesk.Viewing.UI.ControlGroup('custom-toolbar'); //按钮组
			
	  subToolbar.addControl(btnNew); //将新的按钮放入到新增的按钮组中
      model_viewer.toolbar.addControl(subToolbar); //将按钮组添加至控制栏中
		
		
	  model_viewer.loadModel(options.model_src)
    })
	
	// 是否包含工具栏加载
    function ViewerWithTool(el, hasTool) {
      if (hasTool) {
        return (new Autodesk.Viewing.Private.GuiViewer3D($(el)[0], {}))
      } else {
        return (new Autodesk.Viewing.Viewer3D($(el)[0], {}))
      }
    }
</script>
</body>
</html>