本文档旨在介绍如何开发一个可运行于web前端的MorphoMR®MRH5项目，实现以下功能：
(一)预加载资源
(二)调用摄像机
(三)设置AR-3D场景
(四)加载AR视频
(五)加载AR模型
(六)IMU控制
（一）预加载资源
MRH5实现预先加载资源是通过create.js，create.js实现了预先加载图片，视频和音频及加载进度更新的功能。
1.在html代码中引入create.js库，示例如下：
<![CDATA[
<script src="../a/libs/createjs.min.js"></script>
]]>
2.在index.js 初始化create.js，示例如下：
<![CDATA[
this.preload = new createjs.LoadQueue(!1),
]]>
3.初始化preloader函数，示例如下：
<![CDATA[
key: "preloader",value: function () {
var progressBar = $("#progressBar")
this.preload.installPlugin(createjs.Sound),
this.preload.on("complete", function () {
// 加载完成后的代码
}, this),
this.preload.on("progress", function () { // 更新加载进度
var e = Math.floor(100 * this.preload.progress);
$("div", progressBar).css("width", ((e / 100) + "%");
document.getElementById("openLoadingPercent").innerHTML = ((e / 100) + "%";
}, this),
this.preload.loadManifest([ // 待预加载的资源（图片，视频，音频）
{src: "../a/media/btn_ar.png"},
{src: "../a/media/openanim-landscape2.jpg"},
{src: "resources/1.mp4"}
])
}
]]>
(二)调用手机 / WebCam摄像机
1.MRH5实现相机调用可直接通过index.js实现，示例如下：
<![CDATA[
//列出移动端所有摄像机
navigator.mediaDevices.enumerateDevices().then(function(devices){
console.log(devices),
devices.find(function(device){
if ("videoinput" === device.kind) {
var videoDevices = {};
videoDevices.name = device.label || "camera",
videoDevices.deviceId = device.deviceId,
devices.push(videoDevices)
}
}),
r.devices.length === 0 ? n("获取摄像头失败") : (canvasElement = document.createElement("canvas"),
canvasContext = canvasElement.getContext("2d"),
console.log(devices),
resolve(devices))
}).catch(function (error) {
reject(error)
});
var deviceSettings = {
audio: !1,
video: {
deviceId: {
exact: a
}
}
};
//打开摄像机
let video = $("#video-box")[0],
navigator.mediaDevices.getUserMedia(deviceSettings).then(function (e) {
video.srcObject = e,
video.style.display = "block",
video.play(),
resolve(!0)
}).catch(function (error) {
n(error)
});
]]>
<![CDATA[2.在HTML的 <body>分区里加入以下代码]]>
<![CDATA[
// 把摄像机画面叠加在页面背景上
<video id="video-box" playsinline=""></video>
]]>
（三）设置AR-3D场景
1.在index.htmL中引入Three.js，示例如下：：
<![CDATA[
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
]]>
或者
<![CDATA[
<script src="js/three.min.js"></script>
]]>
2.在index.js上初始化ThreeJs元素，示例如下：
<![CDATA[
// 初始化ThreeJs基本场景
var scene = new THREE.Scene()
// Camera 相机
var camera = new THREE.PerspectiveCamera( // 透视相机 - 近大远小
45, // 可视角度
this.canvas.offsetWidth / this.canvas.offsetHeight, // 长宽比例
0.1, // 近深度剪切面
1000 // 远深度剪切面
)
// CanvasRenderer 渲染器
var renderer = new THREE.WebGLRenderer({
canvas: canvas, // 若未设置，ThreeJs会在HTML上自动生成Canvas
antialias: !1,
alpha: !0,
premultipliedAlpha: !0
}),
renderer.setClearColor(0, 0), // 设置背景色
renderer.setPixelRatio(window.devicePixelRatio), // 渲染区域大小
//可根据预先设置好的Canvas或者根据窗口尺寸设置尺寸window.innerWidth, window.innerHeight
renderer.setSize(canvas.offsetWidth, canvas.offsetHeight, !1),
// renderer.setSize(canvas.offsetWidth, canvas.offsetHeight, !1),
]]>
（四）加载AR视频
<![CDATA[1.在index.html初始化<video>元素]]>
<![CDATA[
<div class="videobox" ontouchmove="return false;" style="display: none;z-index: -1">
<video id="myvideo" x5-video-player-type="h5" style="display:none" height="512"
width="256" loop x5-playsinline="" playsinline=""
webkit-playsinline="" poster="" preload="auto"></video>
</div>
]]>
2.在index.js初始化Three.Js视频平面
<![CDATA[
// 指向已初始化的 <video> 元素
this.myvideo = $("#myvideo");
// 绑定AR视频素材
$("#myvideo").html('
<source src="resources/1.mp4" />'),
// 初始化ThreeJs VideoTexture，绑着该视频，然后继续通过MeshBasicMaterial绑定在ThreeJs 平面（plane）上：
var InitVideoPlane = function () {
function {
this.video = (0, a.default)("#myvideo")[0],
this.texture = new s.VideoTexture(
this.video,
s.UVMapping,
s.ClampToEdgeWrapping,
s.ClampToEdgeWrapping,
s.LinearFilter,
s.LinearFilter,
s.RGBFormat,
s.UnsignedByteType
),
this.material = new s.MeshBasicMaterial({
map: this.texture,
overdraw: .5
}),
this.plane = new s.PlaneGeometry(this.width, this.height, 4, 4),
this.mesh = new s.Mesh(this.plane, this.material),
this.mesh.scale.x = this.scale
}
return i(n, [{
key: "show",
value: function (e, t) {
var n = this.height * (.5 * window.innerHeight - (e + .5 * t)) / t,
r = -this.height * window.innerHeight / (2 * t *
Math.tan(s.Math.degToRad(.5 * this.camera.fov)));
this.mesh.position.set(0, n, r);
}
}])
}
// 当预先加载完成后，初始化AR-3D场景
this.preload.on("complete", function () {
getVideo().show(e, t);
}, this),
// 设定全屏播放视频
this.myvideo[0].play()
]]>
（五）加载AR模型
在index.js中调用FBXLoader.js实现预先加载资源
<![CDATA[
{
key: "loadFBXmodel",
value: function (modelName, x, y, z) {
let ke = this;
// 初始化
this.fbxLoader = new THREE.FBXLoader();
this.fbxLoader.load(
'assets/fbx/' + modelName + '.fbx',
function ( object ) {
ke.modelObject = object;
// 绑定模型动画，初始化AnimationMixer，指向模型
object.mixer = new THREE.AnimationMixer( object );
ke.mixers.push( object.mixer );
var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();
ke.modelObject.position.set(x, y, z); // 设置模型位置
ke.scene.add( object );
},
function (e) {
// 显示模型加载进度
var f = Math.floor(e.loaded / e.total * 100);
$("div", $("#progress")).css("width", f + "%");
document.getElementById("loadingPercent").innerHTML = f + "%";
console.log( f + '% loaded' );
if (e.loaded === e.total) {
console.log("content all loaded");
// 继续进行代码
}
},
function (error) {
console.log("an error happened: " + error);
}
)
}
}
]]>
（六）IMU控制
在index.js调用DeviceOrientationControls类库实现IMU控制。
<![CDATA[
{
key: "set",
value: function () {
let ke = this;
// 绑定3D场景里的相机到模型上
this.camera.updateMatrixWorld(!0);
this.camera.localToWorld(ke.modelObject.position);
this.camera.getWorldQuaternion(ke.modelObject.quaternion);
console.log("model set");
}
]]>
