threejs加载obj文件

threejs加载并展示obj文件：
研究了一段时间，总结下，废话少说，直接上代码：<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - loaders - OBJ 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="model"></div><script src="/ceshi03/build/three.js"></script><script src="/ceshi03/build/OBJLoader.js"></script><script src="/ceshi03/OrbitControls.js"></script><script>var container;var camera, scene, renderer;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var object;init();animate();function init() {var Models = document.getElementById('model');
//          container = document.createElement( 'div' );
//          console.log(container)
//          info.appendChild( container );camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000 );camera.position.x = 0;camera.position.z = 2800;camera.position.y = 300;// scenescene = new THREE.Scene();var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.3 );scene.add( ambientLight );var pointLight = new THREE.PointLight( 0xffffff, 0.2 );camera.add( pointLight );scene.add( camera );var controls = new THREE.OrbitControls(camera);controls.autoRotate = true;// 设置平面自动旋转// managerfunction loadModel() {object.traverse( function ( child ) {//                if ( child.isMesh ) child.material.map = texture;} );object.position.y = -1050;scene.add( object );}var manager = new THREE.LoadingManager( loadModel );manager.onProgress = function ( item, loaded, total ) {console.log( item, loaded, total );};// texture//          var textureLoader = new THREE.TextureLoader( manager );
//
//          var texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );// modelfunction onProgress( xhr ) {if ( xhr.lengthComputable ) {var percentComplete = xhr.loaded / xhr.total * 100;console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );}}function onError( xhr ) {}var loader = new THREE.OBJLoader( manager );//          loader.load( 'models/obj/male02/male02.obj', function ( obj ) {loader.load( '/ceshi03/model.obj', function ( obj ) {object = obj;}, onProgress, onError );//renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );Models.appendChild( renderer.domElement );document.addEventListener( 'mousemove', onDocumentMouseMove, false );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 onDocumentMouseMove( event ) {mouseX = ( event.clientX - windowHalfX ) / 2;mouseY = ( event.clientY - windowHalfY ) / 2;}function animate() {requestAnimationFrame( animate );render();}function render() {//          camera.position.x += ( mouseX - camera.position.x ) * .05;
//          camera.position.y += ( - mouseY - camera.position.y ) * .05;camera.position.x +=.05;camera.position.y += .05;camera.lookAt( scene.position );renderer.render( scene, camera );}var myDate = new Date()function ChangeFormate(floatvar) {var f_x = parseFloat(floatvar);if (isNaN(f_x)) {//alert('function:changeTwoDecimal->parameter error');return false;}var f_x = Math.round(f_x * 100) / 100;var s_x = f_x.toString();var pos_decimal = s_x.indexOf('.');if (pos_decimal < 0) {pos_decimal = s_x.length;s_x += '.';}while (s_x.length <= pos_decimal + 2) {s_x += '0';}if (floatvar < 0) {return s_x.substring(1, s_x.length);} else {return s_x;}}console.log(ChangeFormate(myDate))</script></body>
</html>

根据上面的代码我们可以将自己的obj文件进行展示

详细代码请查看：

https://download.csdn.net/download/heidou_2016/10686774

更加详细的threejs教程，请查看

http://techbrood.com/threejs/docs/

threejs加载obj文件相关推荐

unity动态加载.obj文件相关
.obj文件加载相关 QA: 要点 .obj文件结构 .mtl文件结构材质匹配问题动态加载obj文件 unity资源商城插件:Runtime Obj Importer QA: q: 如何动态加载o ...
Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
目录 1.引入包三个包 2.在vue 组件内 import文件 3.在mound钩子函数内调用 4.效果图部分加载报错另:HTML页面使用three加载obj文件和mtl文件 1.引入包三个包 n ...
threejs加载服务器文件,如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件. 在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃. 现在要加载OBJ和MTL文件,需要结合OBJLoader和MTL ...
threejs加载obj模型_Vulkan编程指南(章节31-载入模型)
章节31 载入模型介绍本章节我们将会渲染一个带有纹理的三维模型. 库我们使用tinyobjloader库来从OBJ文件加载顶点数据.tinyobjloader库是一个简单易用的单文件OBJ加载器 ...
unity动态加载obj文件
unity2018.4.2f1 vs2017 最近项目需求,需要实现动态读物外部obj模型,并加载到场景中,研究了好几天,终于实现了,在此做个记录. 1.首先随便找个.obj模型,带贴图,我的资源截图 ...
Java3D加载obj文件+mtl文件
Java3d入门学习可以参考这位博主大神--苏若年,关于Java3D学习的文章.下面给出他部分文章的链接: 文1 创建三维几何模型:[ http://www.cnblogs.com/dennisit/ ...
ThreeJS 加载 obj/3ds/fbx/gltf/等等
1. 下载ThreeJS https://github.com/mrdoob/three.js/archive/master.ziphttps://github.com/mrdoob/three.js ...
threejs加载obj模型_倾斜摄影三维模型几种常见的格式，你能说出哪些？
本文首发于公众号Wish3D,原文链接:倾斜摄影三维模型几种常见的格式,你能说出哪些? 无人机航拍的影像经过建模软件处理产出之时,有很多成果的数据需要我们去选择输出,对于新手而言,如何选择数据格式呢? ...
vs2019 加载.obj文件报错找不到403 IIS 3D可视化.obj/.mtl文件找不到
由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序. 解释的明明白白,iis缺少MIME的文件映射. 所以根据缺少的文件后缀,添加对应的MIME. 在vs2019的Web.con ...

threejs加载obj文件

threejs加载obj文件相关推荐

最新文章

热门文章