html5怎样引入三维模型，创建360度旋转浏览？

html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。

比如可以用以下方法实现图片的360度旋转：

代码示例：

var render, loop, t, dt, //定义变量

DEG2RAD = Math.PI / 180, //角度转弧度

cvs = document.querySelector('canvas'), //创建canvas

ctx = cvs.getContext('2d'),//绘制2d图形上下文

teddy = new Image(), //创建图像

heart = new Image(), //创建图像中心

angle = 0,//初始化角度为0

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame

//创建动画帧

cvs.width = 400

cvs.height = 200

teddy.src = 'xxx.jpg'

heart.src = 'yyy.jpg'

//开始渲染

render = function (timestamp) {

dt = timestamp - t

t = timestamp

// cavas设置为白色

ctx.fillStyle = "rgb(255,255,255)"

ctx.fillRect(0, 0, cvs.width, cvs.height)

// 绘制中心

ctx.drawImage(heart, -20, -120)

// 绘制teddy

ctx.save()

ctx.translate(cvs.width/2, cvs.height/2)// 移动鼠标到画布中心

ctx.rotate(DEG2RAD * angle)// 旋转画布

ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2)// 绘制中心图片

angle += dt / 16.67 * 6// increment angle ~ 360 deg/sec

ctx.restore()

}

loop = function (timestamp) {

reqAnimFrame(loop)

render(timestamp)

}

t = Date.now()

loop(t)

首先需要安装一个Dreamweaver软件用于修改网页代码

在模版之家下载了如下图所示的一个网站，我们的目标是把3D模型插入到红框的位置。

打开渲染完成后的文件把红框中的两个文件复制到网站根目录

用Dreamweaver打开文件中的index.html（就是网站的首页）并点击红框位置的实时视图菜单（好找到要修改的位置以及实时看到效果）

在实时视图中点击下目标框体即可自动定位至要修改的目标代码

这时候我们用下列代码来替换目标位置的代码，代码中红色的部分需要根据自己的命名修改

不知道为什么直接贴代码无法显示只能用图片代替了，需要代码可以去下面的示例下载

修改完成后按下F12保存并预览，出现红框中的图案就表明成功了。

在图片范围内拖动鼠标即可进行互动展示了。

同样的方法修改掉另外两个位置后得到如下页面。

还可以通过手机查看也可以分享到微信朋友圈，只要支持HTML5的浏览器都能查看。。。

查看你做好的文件的源代码(在记事本或dreamweaver中打开),然后修改代码成你想要的形式.

最好懂asp.net语言,尽量不要过多修改已有代码,但你可以进行比如位置调整,游戏的大小调整,或增加其他内容.当然这些东西也可以在u3d中就搞好

本身就是网页文件,直接用就可以了

你都把网站建起来了,使用.html文件应该很熟炼

---