×

工业设计互动平台

手机短信,快捷登录

微信登录,快人一步

QQ登录

只需一步,快速开始

分享个如何将keyshoyVR插入到网页中的教程

发布于 2017-10-23 3 点赞 9 评论 6965 浏览

本帖最后由 xiemaoxian 于 2017-10-23 21:56 编辑

帖子针对啥都不会但是又想把keyshotVR应用到实际中的小白,大神勿喷~~~废话不多说这是本人的个人网站并插入了keyshotVR里面的文件http://www.tianj.xyz/
之前学习keyshot就是发现keyshotVR功能才去学的,但是发现没有将keyshotVR插入到网页中的教程,蛋疼的我找来找去从网友的只言片语中找出了答案,经过一段时间的摸索终于可以通过简单的方法实现了。大学时学过一点网页设计但是学的不好再加上毕业以后没有从事相关的工作基本上等于不会,但是基本的工具和代码还是记得一点点所以就用最基本的工具来实现这个功能吧这样大家都容易学会。我想刚毕业走上工作岗位的童鞋如果会这一招应该也是有点好处的,比如去应聘时带上自己的作品,把自己的网站展示一下应该会给面试官留个好印象吧~~~
首先去安装一个Dreamweaver软件(网页制作三剑客软件之一简单易懂)然后得弄一个个人网站来测试keyshotVR是否成功啊?怎么办?一般的思路是租用服务器-部署服务器-制作网页-上传网页等等。。。不是我说一般人还真不会,当时我也是困在这一关,费用高不说部署服务器一般人也不会啊~~~后来我找到了一个东西是百度云出品的BAE一天2毛钱就能租用了,灰常给力!!!租用了BAE以后如果只是测试就不用去购买域名了直接用租用BAE送的二级域名测试就行了。如果要展示网站则需要购买域名并且备案,成本大概2块钱。。。(啥?2块钱也行?答:是的只需要2块钱)一块钱用来买域名一块钱用来解析域名。购买域名解析域名以及备案的教程方法网上很多就不废话了,不明白也可以找我。租用BAE的教程也一样网上教程一大堆,不明白再找我。这东西说起来一堆做起来也很简单的~~~本教程只针对如何把keyshotVR插入到网页中并且上传到百度的BAE(注意网页管理的工具选择SVN啊就这个我会其他的不会)
首先去下载一个网页模版,如果需要手机跟电脑都能使用的网页就找响应式网页模版或者自适应网页,网上很多。
QQ图片20171023205856.png
解压缩后打开文件夹找到index.html用DW打开index.html文件
QQ图片20171023210324.png
然后按一下F12打开网页预览我们的目标是把keyshotVR插入到图中的红圈的位置中(找了一下就这位置比较合适而且自适应大小)
QQ图片20171023211225.png QQ图片20171023211341.png
将渲染完成的keyshotVR文件复制到网页文件夹中
QQ图片20171023211955.png
在DW中找到要插入的位置,选中要插入的框架双击一下就会定位到需要更改的代码
用下面的代码替换选中的代码(注意ycz.html是就是你自己命名的文件的名称需要根据自己的命名更改)
  1. <div style="position: relative; padding-bottom: 100%; height: 0px; overflow: hidden;"><iframe style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" src="<font color="#ff0000"><font color="#ff0000"><b>ycz.html</b></font></font>" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
复制代码
QQ图片20171023212613.png
替换后就大功搞成了,按一下F12预览一下看看效果吧
QQ图片20171023212729.png
同理插入到其他框架中也是一样的方法~~~
注意上面的那段代码是改良过的代码可以自适应手机以及大小屏幕,而keyshot软件自动生成的instructions.html文件里面的代码是无法自适应屏幕大小的。
做完这些以后只需要将文件夹通过SVN上传到服务器等待一会儿即可
上传方法是右键点击SVN文件夹选择Svn Commit
如果你是自己测试到这一步基本就可以了,如果你要展示给别人看那就绑定一下备案过的域名就行
虽然这帖子有点不伦不类但是还是希望能顺利发到论坛帮助有需要的人~~~自己摸索也是需要一定的时间的
file:///C:\Users\admin\AppData\Roaming\Tencent\Users\584751545\QQ\WinTemp\RichOle\U3F@V2W1JC9G8A8A1J]NA84.png


05 bodo.rar

10.07 MB, 下载次数: 1064

 [充值]

教程的文件在这里

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩回复

文明上网理性发言、请文明用语

pipi8864774 | 设计助理 | 发表于 2017-10-24 10:46:14
请问有没有方法弄到网店的产品介绍呢?我是做电商的
0 回复

举报

xiemaoxian · 发表于 2017-10-25 18:11 点评

哎除非自建商城否则没有办法啊~~~ 我当时是想搞到淘宝上面的 但是事实证明没有办法~~~不过淘宝目前就针对天猫店推出了一个全景功能其他平台估计也没戏,他们基本只支持图文视频。。。

xiemaoxian | 实习生 | 发表于 2017-10-25 18:11:23
pipi8864774 发表于 2017-10-24 10:46
请问有没有方法弄到网店的产品介绍呢?我是做电商的

哎除非自建商城否则没有办法啊~~~   我当时是想搞到淘宝上面的 但是事实证明没有办法~~~不过淘宝目前就针对天猫店推出了一个全景功能其他平台估计也没戏,他们基本只支持图文视频。。。
0 回复

举报

pipi8864774 · 发表于 2017-10-26 08:39 点评

好的,谢谢

pipi8864774 | 设计助理 | 发表于 2017-10-26 08:39:53
xiemaoxian 发表于 2017-10-25 18:11
哎除非自建商城否则没有办法啊~~~   我当时是想搞到淘宝上面的 但是事实证明没有办法~~~不过淘宝目前就针 ...

好的,谢谢
0 回复

举报

HELLO丶RHINO | 实习生 | 发表于 2017-10-31 08:51:17
大神,谢谢啦~
0 回复

举报

xiemaoxian · 发表于 2017-10-31 21:00 点评

客气 我只是归纳了一下网友的回答给出具体步骤

xiemaoxian | 实习生 | 发表于 2017-10-31 21:00:12

客气   我只是归纳了一下网友的回答给出具体步骤:lol
0 回复

举报

entlat | 实习生 | 发表于 2017-12-5 16:52:50
自己租个空间和域名,一年才几百元,把资料传上去,做个连接就可以。
0 回复

举报

徐汉克克克 | 实习生 | 发表于 2019-6-28 15:13:47
多谢楼主分享,这个效果,13年的时候就在公司的网站上实现过了,不过当时是通过多角度透明底图片合成的方式实现的。其实效果雷同
0 回复

举报

lz956075626 | 设计助理 | 发表于 2020-3-10 12:05:05
看了楼主的帖子 有如神助
0 回复

举报

ww2515561 | 设计助理 | 发表于 2020-5-31 14:03:43
大神,怎么联系
0 回复

举报