Threejs载入OBJ和贴图
2015-01-15 16:28
204 查看
未使用MTL文件加载贴图
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>Example 08.06 - Load OBJ model </title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/OBJLoader.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function () {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColorHex(0xaaaaff, 1.0);
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 1;
camera.position.z = 200;
camera.lookAt(new THREE.Vector3(0, 0, 0));
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-30, 40, 50);
spotLight.intensity = 1;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial
}
var gui = new dat.GUI();
var mesh;
var loader = new THREE.OBJLoader();
loader.load('../assets/models/00.obj', function (geometry) {
var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});
//store global reference to .obj
globalObject = geometry;
geometry.traverse( function (child) {
if ( child instanceof THREE.Mesh ) {
child.material.map = THREE.ImageUtils.loadTexture( '../assets/models/00.jpg');
child.material.needsUpdate = true;
}
});
// geometry is a group of children. If a child has one additional child it's probably a mesh
geometry.children.forEach(function (child) {
if (child.children.length == 1) {
if (child.children[0] instanceof THREE.Mesh) {
child.children[0].material = material;
}
}
});
mesh = geometry;
geometry.scale.set(1, 1, 1);
geometry.rotation.x = -2;
scene.add(geometry);
});
render();
function render() {
stats.update();
if (mesh) {
mesh.rotation.y += 0.006;
mesh.rotation.x += 0.006;
// mesh.rotation.y+=0.006;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>使用MTL文件加载贴图
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<title>Example 08.07 - Load OBJ and MTL </title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/OBJLoader.js"></script>
<script type="text/javascript" src="../libs/MTLLoader.js"></script>
<script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
<script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
// once everything is loaded, we run our Three.js stuff.
$(function () {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColorHex(0xaaaaff, 1.0);
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(new THREE.Vector3(0, 10, 0));
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 40, 30);
spotLight.intensity = 2;
scene.add(spotLight);
// add the output of the renderer to the html element
$("#WebGL-output").append(webGLRenderer.domElement);
// call the render function
var step = 0;
// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial
}
var gui = new dat.GUI();
var mesh;
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function (event) {
var object = event.content;
object.scale.set(1, 1, 1);
mesh = object;
scene.add(mesh);
object.rotation.x = 0.2;
object.rotation.y = -1.3;
});
loader.load('../assets/models/00.obj', '../assets/models/00.mtl', {side: THREE.DoubleSide});
render();
function render() {
stats.update();
if (mesh) {
// mesh.rotation.y+=0.006;
}
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Threejs载入obj和mtl以及添加旋转和阴影,自适应，鼠标控制
- threejs第五篇【一条龙测试之四 threejs 给obj模型贴图】
- 关于大四上学期的计算机图形学实验报告123——opengl建模、载入OBJ文件、纹理贴图、光照、交互。
- vtk读取obj文件和贴图
- 自已写了个GDI类，实现了相对路径载入任意类型的图片函数，并加一个在CRECT矩形上贴图的函数(5月25日写)
- 使用opengl载入静态3d模型.obj的方法
- 3dmax导出three.js使用的obj格式文件时缺少贴图
- threejs 加载stl 或 obj 模型的代码模板
- U3D地形（三）之Maya打开.obj模型并为其贴图
- 【转】glTexImage2D()和gluBuild2DMipmaps() [将载入的位图文件(*.bmp)转换成纹理贴图]+glTexParameteri()纹理过滤函数
- Android OpenGLES2.0（十六）——3D模型贴图及光照处理（obj+mtl）
- 关于3D框架rajawali对obj文件的解析和贴图方法！！！
- threejs第五篇【一条龙测试之三 threejs加载 obj 格式模型】
- 使用Threejs和shaderMaterial给plane贴图
- Android OpenGLES2.0（十六）——3D模型贴图及光照处理（obj+mtl）
- ThreeJS文字作为纹理贴图
- 解决unity5 地形 从assetbundle载入后，贴图分辨率不正常的问题
- XNA 贴图载入的新状况
- OBJ文件动态载入Unity中的一个算法小问题
- Maya打开.obj模型并为其贴图