threejs加载obj文件

article/2025/10/25 3:51:56

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文件进行展示