加载obj模型和mtl材质文件 Three.js
加载obj模型和mtl材质文件 Three.js
周星星9527
发布于 2021-11-15 13:07:45
发布于 2021-11-15 13:07:45
文章被收录于专栏：javascript趣味编程
原文：
https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>obj Viewer</title>
<style>
body {
margin: 0;
overflow: hidden;
}
.label {
color: #0F0;
font-family: sans-serif;
padding: 2px;
background: rgba(0, 0, 0, .6);
}
</style>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
<script src="src/dat.gui.min.js"></script>
<script src="src/three.min.js"></script>
<script src="src/DDSLoader.js"></script>
<script src="src/MTLLoader.js"></script>
<script src="src/OBJLoader.js"></script>
<script src="src/OrbitControls.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera, renderer, labelRenderer;
addLights();
addCameras();
addMisc();
addControllers();
loadModels();
render();
function QueryPara(name) {
var regExp = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var info = window.location.search.substr(1).match(regExp);
if (info != null) return unescape(info[2]); return null;
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
function addLights() {
var dLight = new THREE.DirectionalLight(0xffffff, 0.5);
dLight.castShadow = true;
dLight.position.set(0, 80, 80);
//Set up shadow properties for the light
dLight.shadow.camera.near = 20; //产生阴影的最近距离
dLight.shadow.camera.far = 200; //产生阴影的最远距离
dLight.shadow.camera.left = -200; //产生阴影距离位置的最左边位置
dLight.shadow.camera.right = 200; //最右边
dLight.shadow.camera.top = 200; //最上边
dLight.shadow.camera.bottom = -80; //最下面
scene.add(dLight);
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);
}
function addCameras() {
var width = window.innerWidth; //
var height = window.innerHeight; //
var k = width / height; //
var s = 100; //
//
camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 3000);
camera.position.set(200, 300, 200); //
camera.lookAt(scene.position); //
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);//
// 开启阴影支持
renderer.shadowMap.enabled = true;
// 阴影类型
renderer.shadowMap.type = THREE.BasicShadowMap;//THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement); //body
}
function addMisc() {
scene.add(new THREE.AxesHelper(300));
window.addEventListener('resize', onWindowResize, false);
}
function addControllers() {
var controls = new THREE.OrbitControls(camera, renderer.domElement);
}
var manager = new THREE.LoadingManager();
manager.addHandler(/\.dds$/i, new DDSLoader());
function onProgress(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
}
}
function onError() { }
function loadModels() {
var fileName = QueryPara("obj") || 'GateValve';
new MTLLoader(manager)
.setPath('models/')
.load(fileName+'.mtl', function (materials) {
materials.preload();
console.log("materials:", materials);
new OBJLoader(manager)
.setMaterials(materials)
.setPath('models/')
.load(fileName+'.obj', function (obj) {
obj.scale.set(1, 1, 1);
obj.position.set(0, 0, 0);
obj.rotation.x += 0;
obj.castShadow = true;
scene.add(obj);
console.log(obj.children);
}, onProgress, onError);
});
}
function onWindowResize() {
var width = window.innerWidth;
var height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
render();
}
</script>
</html>效果：
（正文完！）
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-11-08，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 传输过程数值模拟学习笔记 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
腾讯云开发者
