three.js加载OBJ模型

最新推荐文章于 2024-05-08 15:02:11 发布

南方姑娘-qing

最新推荐文章于 2024-05-08 15:02:11 发布

阅读量2.8k

点赞数

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/csdn_cai_csdn/article/details/107343560

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

three.js加载OBJ模型

推荐一个免费下载3D模型的网址https://www.cgtrader.com，包含多种格式（obj, mtl等）。

three.js现在是es6语法，旧版本是es5的。
es5，提取码：tfak；
es6项目下载地址 https://github.com/mrdoob/three.js

案例采用的是es5

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>INS Attitude</title>
        <style>
            body, html { margin:0; width: 100%; height: 100%; }
            #container{
                width:100%;
                height: 100%;
                /*background-color: #b9c0cc;*/
            }
    </head>
    <body>
        <!-- plane -->
        <div id="container"></div>

        <script type="text/javascript" src="js/three.min.js"></script>
        <script type="text/javascript" src="js/loaders/OBJLoader.js"></script>
        <script type="text/javascript" src="js/controls/OrbitControls.js"></script>

        <script type="text/javascript" >

            var camera, scene, renderer;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            var airPlaneObj;
            var INS_Controls;
            var container = document.getElementById('container');
            
            function Init3D() 
            {
               // 创建相机
                camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );
                // 设置视点
                camera.position.set(5, 10, 5); // x,y,z
                camera.lookAt(0, 0, 0);
				
				// 设置对三维场景进行缩放
                INS_Controls = new THREE.OrbitControls( camera, container );
                INS_Controls.maxPolarAngle = Math.PI ; // 3D 最大旋转角度
                INS_Controls.minDistance = 0;
                INS_Controls.maxDistance = Infinity;

                // scene
                scene = new THREE.Scene();
                
				// 光源
                var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
                scene.add( ambientLight );
                var pointLight = new THREE.PointLight( 0xffffff, 0.5 );
                camera.add( pointLight );
                scene.add( camera );
				
				// 坐标轴
                var axesHelper = new THREE.AxesHelper( 7 ); 
                scene.add( axesHelper );
                axesHelper.rotation.x = -Math.PI/2; 
                axesHelper.rotation.z = -Math.PI/2; 

                // manager
                function loadModel() 
                {
                    airPlaneObj.traverse( function ( child ) {
                        // if ( child.isMesh ){
                        //     child.material.map = texture;
                        // } 

                    } );
                    scene.add( airPlaneObj );
                }

                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/a1.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() {}
				
				//  OBJLoader 加载模型数据
                var loader = new THREE.OBJLoader( manager );
                loader.load( 'models/airplane.obj', function ( obj ) {
                    airPlaneObj = obj;
                    //修改插件原有的旋转顺序（XYZ）
                    airPlaneObj.rotation._order = "YXZ";
                }, onProgress, onError );

                //
                renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

            }

			// 响应屏幕
            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 animate(){
				//requestAnimationFrame方法每秒刷新60次
                requestAnimationFrame( animate );

                // airPlaneObj downloaded: rotation 
                if(airPlaneObj != undefined)
                {
                    if(gInsAttArray.length != 0 )
                    {
                        airPlaneObj.rotation.x += 0.01 ;
                    }
                }
                
                cameraRender();
            }

            function cameraRender(){
                renderer.render( scene, camera );
            }


           
            window.onload = function(){
                Init3D();
                animate();

                window.addEventListener( 'resize', onWindowResize, false );
            }

        </script>
    </body>
</html>
</html>

效果图

在这里插入图片描述

南方姑娘-qing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
three.js加载OBJ模型

three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com，包含多种格式（obj, mtl等）。three.js现在是es6语法，旧版本是非es6的。旧版本，提取码：tfak；新版本项目下载地址 https://github.com/mrdoob/three.js案例采用的是旧版本<!DOCTYPE html><html lang="en"> <head> <meta char
复制链接

扫一扫