# 答疑专题

宅家呗接受技术咨询和课程定制,关于技术咨询服务请查看宅学呗商城 (opens new window)

# Verge3D如何应用到三维可视化项目开发?

这个教程解答并演示了如何将Verge3D用于三维可视化项目开发,主要解答了以下问题:

  1. Verge3D导出的.glTF如何在页面中调用?
  2. 如何获取后台数据?
  3. 如何实现在三维场景中动态展示后台数据(或图表、饼图)?
  4. 如何解析后台数据?
视频

# 没有服务器如何演示Web3D应用程序?

假如你现在正在学习或者开发Web3D应用程序,但是你却没有服务器去部署,那么怎么向别人展示你的工作成果呢?除了在局域网环境下通过本地服务器向同事演示这种方法以外,还有一种更加高大上的办法——直接封装成windows桌面应用程序,然后装进U盘,拷贝到电脑上演示。

封装工具使用的是electron,虽然electron的开发已经算是简便了,但是对于美术人员还是要面对开发环境部署、命令行、github、node.js等这些天书一样的代码。所以,我做了一个预封装,只需要将你的Web3D应用程序直接拷贝进指定文件夹,就可以在windows桌面打开。此方法适用于需要做Web3D演示,但是没有网络环境或服务器的条件。

# 下载

下载Electron3D (opens new window)

# 使用

  1. 下载解压后,首先执行electron3d.exe,确保能打开窗口,看到提示信息:“Web3D应用程序正常运行!”

  2. 关闭窗口。将你的Web3D应用程序的所有文件(html/css/js/等文件)拷贝到C:\electron3d\resources\app\web3d\,如果提示有同名文件,选择覆盖。

  3. 如果你的启动文件是默认的index.html,直接跳到第4步,运行桌面程序即可;如果你的启动文件不是默认的,比如是app.html,则需要在app目录下打开main.js,修改入口文件,将index.html,替换成你的app.html

mainWindow.loadFile('web3d/index.html')
1
  1. 重新打开electron3d,成功。

# 演示

视频

# 为移动设备开发单独版本,并实现重定向

有时候我们在开发Web3D应用程序的时候,PC端和移动端在交互上差异太大,而且移动端往往也需要做单独地优化,所以需要将开发两个版本。那么,如果存在两个版本,如何让用户通过同一个地址访问到不同的版本呢?

这里就需要重定向。

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
1
2
3
4
5
6
7

其中“mobile.html”替换为移动版所在的位置。该技术也可以适用于加载替代样式表。

# 针对iPhone/iPods

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>
1
2
3
4
5
6
7

# Blender2.8 如何烘焙和使用灯光贴图?

烘焙灯光贴图是Verge3D应用程序开发常用的优化技巧,课程介绍了烘焙灯光贴图的原理及操作方法。

视频

# 使用工具栏为选中模型更换材质

这是一个学员答疑视频,案例中学员使用gwd设计了一组工具栏按钮,想通过按钮控制三维场景中棒球帽各部分的材质。

mark

疑问?

请在钉钉群:21935218交流。群内除聚集众多开发者,还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持,请加钉钉好友:zjbcool

Verge3D知识社区 客服
上次更新: 2020-11-3 22:25:05