threejs的模型引入js框架
万俟震博
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="asset/libs/layui/css/layui.css"/>
<link rel="stylesheet" href="asset/css/default.css"/>
<script src="asset/js/app.js"></script>
</head>
<body>
<div class="cameraBox" id="cameraBox">
<div class="icon">
<i id="camera" class="layui-icon"></i>
</div>
<div class="selectBox">
<select class="select" id="videoDevice"></select>
</div>
</div>
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" id="load"></i>
<video id="video" playsinline=""></video>
<script type="text/javascript" src="asset/libs/layui/layui.all.js"></script>
<script type="text/javascript" src="asset/libs/three/three.min.js"></script>
<script type="text/javascript" src="asset/js/three.js"></script>
<script type="text/javascript" src="asset/js/adapter.js"></script>
<script type="text/javascript" src="asset/js/webar.js"></script>
<script type="text/javascript" src="asset/libs/three/FBXLoader.js"></script>
<script type="text/javascript" src="asset/libs/three/inflate.min.js"></script>
<script type="text/javascript" src="asset/libs/three/OrbitControls.js"></script>
<script type="text/javascript" src="asset/js/api.js"></script>
<script type="text/javascript" src="asset/js/app.js"></script>
<script type="text/javascript">
var loader = new THREE.FileLoader();
function load3D() {
loader.load('app.json', function (text) {
var player = new APP.Player();
player.load(JSON.parse(text));
player.setSize(window.innerWidth, window.innerHeight);
player.play();
document.body.appendChild(player.dom);
window.addEventListener('resize', function () {
player.setSize(window.innerWidth, window.innerHeight);
});
});
}
</script>
</body>
</html>app.js
/**
* 框架
*/
var APP = {
Player: function () {
var loader = new THREE.ObjectLoader();
var camera, scene, renderer;
var events = {};
var dom = document.createElement('div');
this.dom = dom;
this.width = 500;
this.height = 500;
var mixers = [];
var clock = new THREE.Clock();
this.load = function (json) {
renderer = new THREE.WebGLRenderer({antialias: true,alpha:true});
renderer.setPixelRatio(window.devicePixelRatio);
if (json.project.gammaInput) renderer.gammaInput = true;
if (json.project.gammaOutput) renderer.gammaOutput = true;
if (json.project.shadows) {
renderer.shadowMap.enabled = true;
}
if (json.project.vr) {
renderer.vr.enabled = true;
}
dom.appendChild(renderer.domElement);
this.setScene(loader.parse(json.scene));
this.setCamera(loader.parse(json.camera));
//控制摄像机
var controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.target.set(0, 1, 0);
controls.update();
events = {
init: [],
start: [],
stop: [],
keydown: [],
keyup: [],
mousedown: [],
mouseup: [],
mousemove: [],
touchstart: [],
touchend: [],
touchmove: [],
update: []
};
var scriptWrapParams = 'player,renderer,scene,camera';
var scriptWrapResultObj = {};
for (var eventKey in events) {
scriptWrapParams += ',' + eventKey;
scriptWrapResultObj[eventKey] = eventKey;
}
var scriptWrapResult = JSON.stringify(scriptWrapResultObj).replace(/\"/g, '');
//添加环境光
_ambient = new THREE.AmbientLight(0xffffff);
scene.add(_ambient);
// //灯光属性
_spotLight = new THREE.SpotLight(0xffffff);
_spotLight.castShadow = true;
_spotLight.shadowCameraVisible = true;
_spotLight.position.set(100, 500, 100);
//设置阴影贴图精度
_spotLight.shadowMapWidth = _spotLight.shadowMapHeight = 1024 * 4;
scene.add(_spotLight);
var loadt = new THREE.FBXLoader();
var aasd = [0, 5, 10, 15, 20, 25];
//加载模型
loadMoXing();
// runLoad();
var texture = new THREE.Texture();
function loadMoXing() {
loadt.load('fbx/fbx_all_ani.fbx', function (obj) {
obj.mixer = new THREE.AnimationMixer(obj);
mixers.push(obj.mixer);
var action = obj.mixer.clipAction(obj.animations[0]);
action.play();
obj.traverse(function(child)
{
if (child instanceof THREE.Mesh)
{
//将贴图赋于材质
//child.material.map = texture;
//重点，没有该句会导致PNG无法正确显示透明效果
child.material.transparent = true;
}
});
// obj.scale.x=0.5;
// obj.scale.y=0.5;
// obj.scale.z=0.5;
obj.rotateY(44.7);
scene.add(obj);
var load=document.getElementById("load").style.display="none";
});
}
for (var uuid in json.scripts) {
var object = scene.getObjectByProperty('uuid', uuid, true);
console.log(object);
if (object === undefined) {
console.warn('APP.Player: Script without object.', uuid);
continue;
}
var scripts = json.scripts[uuid];
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i];
var functions = (new Function(scriptWrapParams, script.source + '\nreturn ' + scriptWrapResult + ';').bind(object))(this, renderer, scene, camera);
for (var name in functions) {
if (functions[name] === undefined) continue;
if (events[name] === undefined) {
console.warn('APP.Player: Event type not supported (', name, ')');
continue;
}
events[name].push(functions[name].bind(object));
}
}
}
dispatch(events.init, arguments);
};
this.setCamera = function (value) {
camera = value;
camera.aspect = this.width / this.height;
camera.updateProjectionMatrix();
camera.position.z=-50;
camera.position.x=-50;
camera.position.y=20;
if (renderer.vr.enabled) {
WEBVR.checkAvailability().catch(function (message) {
dom.appendChild(WEBVR.getMessageContainer(message));
});
WEBVR.getVRDisplay(function (device) {
renderer.vr.setDevice(device);
dom.appendChild(WEBVR.getButton(device, renderer.domElement));
});
}
};
this.setScene = function (value) {
scene = value;
scene.add(new THREE.AmbientLight(0xFFFFFF));
};
this.setSize = function (width, height) {
this.width = width;
this.height = height;
if (camera) {
camera.aspect = this.width / this.height;
camera.updateProjectionMatrix();
}
if (renderer) {
renderer.setSize(width, height);
}
};
function dispatch(array, event) {
for (var i = 0, l = array.length; i < l; i++) {
array[i](event);
}
}
var prevTime;
function animate(time) {
try {
dispatch(events.update, {time: time, delta: time - prevTime});
} catch (e) {
console.error((e.message || e), (e.stack || ""));
}
if (mixers.length > 0) {
var time = clock.getDelta();
for (var i = 0; i < mixers.length; i++) {
mixers[i].update(time);
}
}
renderer.render(scene, camera);
prevTime = time;
}
this.play = function () {
prevTime = performance.now();
document.addEventListener('keydown', onDocumentKeyDown);
document.addEventListener('keyup', onDocumentKeyUp);
document.addEventListener('mousedown', onDocumentMouseDown);
document.addEventListener('mouseup', onDocumentMouseUp);
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('touchstart', onDocumentTouchStart);
document.addEventListener('touchend', onDocumentTouchEnd);
document.addEventListener('touchmove', onDocumentTouchMove);
dispatch(events.start, arguments);
renderer.animate(animate);
};
this.stop = function () {
document.removeEventListener('keydown', onDocumentKeyDown);
document.removeEventListener('keyup', onDocumentKeyUp);
document.removeEventListener('mousedown', onDocumentMouseDown);
document.removeEventListener('mouseup', onDocumentMouseUp);
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('touchstart', onDocumentTouchStart);
document.removeEventListener('touchend', onDocumentTouchEnd);
document.removeEventListener('touchmove', onDocumentTouchMove);
dispatch(events.stop, arguments);
renderer.animate(null);
};
this.dispose = function () {
while (dom.children.length) {
dom.removeChild(dom.firstChild);
}
renderer.dispose();
camera = undefined;
scene = undefined;
renderer = undefined;
};
//
function onDocumentKeyDown(event) {
dispatch(events.keydown, event);
}
function onDocumentKeyUp(event) {
dispatch(events.keyup, event);
}
function onDocumentMouseDown(event) {
dispatch(events.mousedown, event);
}
function onDocumentMouseUp(event) {
dispatch(events.mouseup, event);
}
function onDocumentMouseMove(event) {
dispatch(events.mousemove, event);
}
function onDocumentTouchStart(event) {
dispatch(events.touchstart, event);
}
function onDocumentTouchEnd(event) {
dispatch(events.touchend, event);
}
function onDocumentTouchMove(event) {
dispatch(events.touchmove, event);
}
}
};
类似资料：