使用Marmoset Toolbag渲染器的Marmoset Viewer进行(html)网页浏览3D模型

最新推荐文章于 2024-05-27 09:56:14 发布

LixiSchool

最新推荐文章于 2024-05-27 09:56:14 发布

阅读量1.2w

点赞数 3

分类专栏： 3D网页

本文链接：https://blog.csdn.net/lizhenxiqnmlgb/article/details/80251756

版权

3D网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渲染器可以导出成Marmoset Viewer进行观察，这样既可以方便导出查看，在一定程度上又能保护自己的模型

但是生成的html文件往往没法在自己浏览器上运行

因为是本地版的，所以通常在chrome或者firefox显示下面的黑色画面，并不能加载模型

尝试下调试，可以看到调试错误是

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/shenmifangke.mview?thumb=1. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

但发现这个并不是跨域问题引起的

而是需要一个开启本地服务器

可以在marmoset官网看到说明

http://www.marmoset.co/viewer/support#local

这里官网也提供了一个简单的方法来实现

就是下载mongoose，

二进制版本地址https://www.cesanta.com/products/binary

能一键构建本地服务器，使用免费版即可,如下：

下面是对应的完整github地址，有兴趣可以去看看其他的

https://github.com/cesanta/mongoose

操作说明

就是简单打开下载的二进制文件mongoose-free-6.5.exe

然后会自动打开浏览器，并在浏览器上（我用的是火狐34）会跳出桌面目录表

选择其中的上面八猴导出的html文件即可观看

如果要关闭服务器可以右下角退出

9.28.2016补充

导出的模型必须放在英文目录

导出的html中head部分marmoset.js必须修改成本地地址，下载个marmoset.js放在一起

比如放同一个目录中的话就改成下面的

 
   [html]  
   view plaincopy
<head>  
    <title></title>  
    <script src="marmoset.js"></script>  
</head>  

如果还是没有办法启动，可以右下角 mongoose 右击go to my address从桌面目录打开试试（因为这个软件打开会自动跳到桌面目录测试还是挺方便的）

其实我挺喜欢这个导出版本切换效果的

很方便

默认导出不是全屏的，如需要设置全屏显示，如何如下代码：

<!DOCTYPE html>
<meta name="viewport" content="user-scalable=0"/>
<html>
<head>
    <title>2</title>
    <script src="https://viewer.marmoset.co/main/marmoset.js"></script>
</head>
<body>
    <script>
        marmoset.embed( 'scene.mview', { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false } );
    </script><div style="width: 1880px; height: 150px; position: absolute; top: 0px; left: 0px;">

<canvas width="1880" height="150" style="width: 1880px; height: 150px; position: absolute;"></canvas><div id="marmosetUI" style="position: absolute; overflow: hidden; user-select: none; width: 1880px; height: 150px;"><div style="position: absolute; cursor: pointer; pointer-events: none; transform: translate(-50%, -50%) rotate(1.0877rad) translate(50%, 50%); left: -62.5%; top: 0px; width: 85px;"><div style="color: white; opacity: 0.5; font-family: Arial; text-shadow: rgba(0, 0, 0, 0.701961) 2px 0px 3px; text-align: left; background: none; padding-left: 8px; padding-top: 6px; padding-bottom: 4px;">Normals</div><div style="width: 10000px; height: 2px; background-color: rgb(170, 170, 170); opacity: 1; position: absolute; top: -1px; left: -1px;"></div></div><div style="position: absolute; cursor: pointer; pointer-events: none; transform: translate(-50%, -50%) rotate(1.0877rad) translate(50%, 50%); left: -62.5%; top: 0px; width: 85px;"><div style="color: white; opacity: 0.5; font-family: Arial; text-shadow: rgba(0, 0, 0, 0.701961) 2px 0px 3px; text-align: left; background: none; padding-left: 8px; padding-top: 6px; padding-bottom: 4px;">Albedo</div><div style="width: 10000px; height: 2px; background-color: rgb(170, 170, 170); opacity: 1; position: absolute; top: -1px; left: -1px;"></div></div><div style="position: absolute; cursor: pointer; pointer-events: none; transform: translate(-50%, -50%) rotate(1.0877rad) translate(50%, 50%); left: -62.5%; top: 0px; width: 85px;"><div style="color: white; opacity: 0.5; font-family: Arial; text-shadow: rgba(0, 0, 0, 0.701961) 2px 0px 3px; text-align: left; background: none; padding-left: 8px; padding-top: 6px; padding-bottom: 4px;">Reflectivity</div><div style="width: 10000px; height: 2px; background-color: rgb(170, 170, 170); opacity: 1; position: absolute; top: -1px; left: -1px;"></div></div><div style="position: absolute; cursor: pointer; pointer-events: none; transform: translate(-50%, -50%) rotate(1.0877rad) translate(50%, 50%); left: -62.5%; top: 0px; width: 85px;"><div style="color: white; opacity: 0.5; font-family: Arial; text-shadow: rgba(0, 0, 0, 0.701961) 2px 0px 3px; text-align: left; background: none; padding-left: 8px; padding-top: 6px; padding-bottom: 4px;">Gloss</div><div style="width: 10000px; height: 2px; background-color: rgb(170, 170, 170); opacity: 1; position: absolute; top: -1px; left: -1px;"></div></div><div style="position: absolute; cursor: pointer; pointer-events: none; transform: translate(-50%, -50%) rotate(1.0877rad) translate(50%, 50%); left: -62.5%; top: 0px; width: 85px;"><div style="color: white; opacity: 0.5; font-family: Arial; text-shadow: rgba(0, 0, 0, 0.701961) 2px 0px 3px; text-align: left; background: none; padding-left: 8px; padding-top: 6px; padding-bottom: 4px;">Topology</div><div style="width: 10000px; height: 2px; background-color: rgb(170, 170, 170); opacity: 1; position: absolute; top: -1px; left: -1px;"></div></div><div style="position: absolute; right: 9px; left: 0px; top: 6px; height: 32px;"><div title="Made with Marmoset Toolbag" style="position: absolute; right: 1px; top: 4px;"><input type="image" src="http://viewer.marmoset.co/main/data/logo1x.png" style="border: 0px; height: 36px; width: 36px; outline: 0px; opacity: 0.5;"></div><div style="position: absolute; right: 46px; top: 5px; width: 1px; height: 31px; opacity: 0.25; background-color: white;"></div><a target="_blank" style="position: absolute; right: 58px; top: 6px; text-align: right; color: white; font-family: Arial; font-size: 12px; text-decoration: none;"><font style="color: rgb(255, 255, 255); opacity: 0.5; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.701961) 1px 1px 2px;">PBR_Arm_Chair<br>by </font><font style="color: rgb(255, 0, 68); opacity: 1; text-shadow: rgba(0, 0, 0, 0.34902) 1px 1px 2px;">sovida</font><font style="color: rgb(255, 255, 255); opacity: 0.5; text-shadow: rgba(0, 0, 0, 0.701961) 1px 1px 2px;"></font></a></div><div style="pointer-events: none;"></div><div style="position: absolute; right: 8px; top: 40px; width: 36px; height: 36px;"><div style="top: 0px; left: 0px; height: 100%; width: 100%;"><input type="image" src="http://viewer.marmoset.co/main/data/fullscreen1x.png" title="Full Screen" style="position: absolute; left: 0px; bottom: 0%; border: none; outline: 0px; opacity: 0.5; width: 32px; height: 24px;"><input type="image" src="http://viewer.marmoset.co/main/data/strips1x.png" title="Layer Views" style="position: absolute; left: 0px; bottom: -100%; border: none; outline: 0px; opacity: 0.5; width: 32px; height: 24px;"><input type="image" src="http://viewer.marmoset.co/main/data/help1x.png" title="Help" style="position: absolute; left: 0px; bottom: -200%; border: none; outline: 0px; opacity: 0.5; width: 32px; height: 24px;"></div></div></div></div>


<object id="yhaitaoplugin" type="application/x-npHaitaoPlugin" style="position:absolute;left:-9000px;top:-9000px;" width="0" height="0"></object><a data-cltversion="2.4.25" data-cltsource="10054" data-cltuuid="525ba6bd950a4620fc849e8aa7c10875" data-cltats="4" href="javascript:" id="yht-info-explugin" style="display: none;"></a></body>
</html>

LixiSchool

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
使用Marmoset Toolbag渲染器的Marmoset Viewer进行(html)网页浏览3D模型

渲染器可以导出成Marmoset Viewer进行观察，这样既可以方便导出查看，在一定程度上又能保护自己的模型但是生成的html文件往往没法在自己浏览器上运行因为是本地版的，所以通常在chrome或者firefox显示下面的黑色画面，并不能加载模型尝试下调试，可以看到调试错误是XMLHttpRequest cannot load file:///C:/Users/Administrator/Des...
复制链接

扫一扫