<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ MTL loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
</div>
<script src="js/three.min.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/OBJMTLLoader.js"></script>
<script>
var container, stats,w;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 400; //坦克40
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
var loader = new THREE.OBJMTLLoader();
loader.load('js/22.obj', 'js/22.mtl', function (object) {
// object.position.y = 2; // 0 坦克tank -0.6 建筑LQ
var hex = 0xff0000;
var MD_Length, MD_Width, MD_height;//记录长宽高
var BaxH = new THREE.BoundingBoxHelper(object, hex);//创建BoundingBoxHelper
BaxH.update();//更新
//scene.add(BaxH); //添加到场景中
MD_Length = BaxH.box.max.x - BaxH.box.min.x; //长
MD_Width = BaxH.box.max.z - BaxH.box.min.z;//宽
MD_height = BaxH.box.max.y - BaxH.box.min.y;//高
//计算模型中心位置
var Cx, Cy, Cz;
Cx = BaxH.box.min.x + MD_Length / 2;
Cz = BaxH.box.min.z + MD_Width / 2;
Cy = BaxH.box.min.y + MD_height / 2;
//添加并设置group坐标位置
var group = new THREE.Group();
scene.add(group);
group.position.set(0, 0, 0);
group.add(object);//将模型加入到group中
//计算新模型新位置 根据模型中心位置设置偏移方向
var NewX, NewY, NewZ;
if (Cx >= 0) {
NewX = -Cx;
} else {
NewX = Cx;
}
if (Cy >= 0) {
NewY = -Cy;
} else {
NewY = Cy;
}
if (Cz >= 0) {
NewZ = -Cz;
} else {
NewZ = Cz;
}
object.position.set(NewX + 1800, NewY + 700, NewZ + 450);
//var start = new Date().getTime(), delta;
//(function anime() {
// delta = new Date().getTime() - start;
object.rotation.y = 1000;
object.rotation.x = 50;
object.scale.set(15,15,15);
// renderer.render(scene, camera);
// return requestAnimationFrame(anime);
//})();
}, onProgress, onError );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
网页显示3D模型(obj和mtl格式)
3星 · 超过75%的资源 需积分: 48 49 浏览量
2018-02-26
15:43:16
上传
评论 6
收藏 6.05MB ZIP 举报 
MGA.zip （19个子文件） 
MGA 
建筑LQ加载obj和mtl.html 3KB 坦克tank加载obj和mtl.html 3KB js 
MTLLoader.js 9KB SJS1.obj 17.57MB 22.mtl 228B teapot-claraio.json 132KB SJS1.mtl 137B three.js 793KB three.min.js 421KB MGA.js 1.74MB tank.mtl 518B LQ.mtl 1KB tank.obj 6.38MB 22.obj 3.96MB OBJMTLLoader.js 8KB LQ.obj 3.11MB OBJLoader.js 8KB 大建筑模型加载obj和mtl.html 5KB SJS1模型加载示例.html 3KB
- 1
- 2
前往页