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; // scene scene = 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;// 设置平面自动旋转 // manager function 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' ); // model function 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教程,请查看