<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
<script type="text/javascript" src="js/three.js" ></script>
<script type="text/javascript" src="js/TrackballControls.js" ></script>
<script type="text/javascript" src="js/DDSLoader.js" ></script>
<script type="text/javascript" src="js/OBJLoader.js" ></script>
<script type="text/javascript" src="js/OBJMTLLoader.js" ></script>
<title>360°三维模型</title>
</head>
<style>
body{
margin: 0;
overflow: hidden;
}
#WebGL-output{
width: 100%;
height: 100%;
}
</style>
<body>
<div id="WebGL-output">
</div>
<script>
$(function(){
var scene = new THREE.Scene();//场景构建
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//四个参数 视场角 方向 最近距 最远距 fov对应着图中的视角，是上下两面的夹角。aspect是*面的宽高比。
//相机构建
var renderer = new THREE.WebGLRenderer();//渲染器构建
renderer.setClearColor(0xEEEEEE);//设置背景颜色
renderer.setSize(window.innerWidth,window.innerHeight);//三个参数 width height updateStyle第三个选填
renderer.shadowMapEnabled = true;//激活阴影
//创建控件并绑定在相机上
trackballControls = new THREE.TrackballControls(camera);//轨迹球控制
trackballControls.rotateSpeed = 3.0;//转速
trackballControls.zoomSpeed = 1.0;//变焦速度
trackballControls.panSpeed = 1.0;//摇镜头速度
trackballControls.noZoom = false;//允许变焦
trackballControls.noPan = false;//允许摇镜头
trackballControls.staticMoving = true;//静态移动
trackballControls.dynamicDampingFactor = 0.3;//动态抑制因素
//添加材质灯光阴影
var ambiColor = "ffffff";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
//模型
var onError = function(xhr){};
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./model/');//设置路径
mtlLoader.load('model.mtl',function(materials){
materials.preload();//材料预加载
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('./model/');//路径
objLoader.load('model.obj', function(object) {//参数
object.position.x = 0;
object.position.y = 0;
object.position.z = 0;object.rotation.y = 0;
object.rotation.z = 0;
object.rotation.x = 0;//模型旋转角度
object.scale.set(1, 1, 1);//模型缩放比例
scene.add(object);
}, onProgress, onError);
});
//渲染视图视角
camera.position.x = -20;
camera.position.y = 20;
camera.position.z = 30;
camera.lookAt(scene.position)
$("#WebGL-output").append(renderer.domElement)//在页面上添加渲染器，dom元素
renderScene();
function renderScene(){
var clock = new THREE.Clock();
var delta = clock.getDelta();//三角点
trackballControls.update(delta);
requestAnimationFrame(renderScene);//请求动画框架
renderer.render(scene,camera);
}
})
</script>
</body>
</html>