three.js 加载 .FBX .OBJ模型文件

网页嵌入模型展示（vue项目）直接用iframe嵌套

注意必须在服务器的环境下启动 这个软件就挺不错的（www文件目录下）

  <iframe src="http://localhost:8080/model/index.html" frameborder="no" border="0" allowtransparency="true" mozallowfullscreen="true" webkitallowfullscreen="true" allow="vr; autoplay; fullscreen"></iframe>

人很话不多直接上代码

js文件夹—>就是three.js整个包
在这里插入图片描述
像我要加载.fbx模型文件，那就加载FBXLoader.js文件
.obj模型文件，那就加载OBJLoader.js文件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>THREE.js Loader</title>
    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: transparent;
            font-family: Helvetica;
        }
        #stage, video, canvas{
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 500px;
        }
        canvas{
            z-index: 99;
        }
		.eruda-entry-btn{
			display: none;
		}
    </style>
</head>
<body>
<div id="stage"></div>
<script type="text/javascript" src="https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
<script type="text/javascript" src="js/build/three.js"></script>
<script type="text/javascript" src="js/examples/js/libs/inflate.min.js"></script>
<script type="text/javascript" src="js/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="js/examples/js/loaders/FBXLoader.js"></script>
<script type="text/javascript" src="js/examples/js/loaders/OBJLoader.js"></script>
<script type="text/javascript" src="js/examples/js/loaders/MTLLoader.js"></script>
<script type="text/javascript" src="js/examples/js/loaders/TGALoader.js"></script>
<script type="text/javascript">
    eruda.init();
 
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
    var isWeiXin = !!u.match(/MicroMessenger/i); // 微信
 
    var stage = document.querySelector('#stage');
    var container;
    var scene, camera, renderer, controls;
    var SCREEN_WIDTH =  window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;
    var angle = 90;
    var nearest = 1;
    var farthest = 1000;
    var mixers = new Array();
    var clock = new THREE.Clock();
    init();
    function init(){
        container = document.createElement('div');
        stage.appendChild(container);
        // 创建场景
        scene = new THREE.Scene();
        // 创建相机
        camera =  new THREE.PerspectiveCamera(angle, SCREEN_WIDTH / SCREEN_HEIGHT, nearest, farthest);
        camera.position.set(20, 20, 40);
        // 环境光
		scene.add(new THREE.AmbientLight(0xFFFFFF));

		 //生成半球光源
		 var hemiLight=new THREE.HemisphereLight(0xFFFFFF,0xFFFFFF,1);
        hemiLight.position.set(0,500,0);
        hemiLight.groundColor = new THREE.Color(0xFFFFFF);//设置地面发出的光线的颜色
        hemiLight.color = new THREE.Color(0xFFFFFF);//设置天空发出的光线的颜色
        hemiLight.intensity =3;
        scene.add(hemiLight);

		// 点光源 
		var pointLight = new THREE.PointLight("#FFFFFF");
		pointLight.position.set(50 , 50, 50);
		pointLight.intensity = 3;
		scene.add(pointLight);


        // 平行光
        var light = new THREE.DirectionalLight(0xFFFFFF, 1);
        light.position.set(30 , 50, 50);
        scene.add(light);
        // 坐标系 xyz 线条
        // var axes = new THREE.AxisHelper(30);
        // scene.add(axes);
 
        // 加载提示
        var manager = new THREE.LoadingManager();
        manager.onProgress = function(item, loaded, total){
            console.log(item, loaded, total);
        };
 
        var onProgress = function(xhr){
            if(xhr.lengthComputable){
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log(Math.round(percentComplete, 2) + '% downloaded');
            }
        };
 
        var onError = function(xhr){
            console.error(xhr);
        };
 

        var fbx_loader = new THREE.FBXLoader(manager);
 
        // fbx静态模型
        // fbx_loader.load('666.FBX', function(object){
        //     object.scale.multiplyScalar(1); 
 
        //     scene.add(object);
        // }, onProgress, onError);
 
        // fbx动画
        fbx_loader.load('666.FBX', function(object){
 
            object.mixer = new THREE.AnimationMixer(object);
            mixers.push(object.mixer);
 
            var action = object.mixer.clipAction(object.animations[0]);
            action.play();
 
            object.scale.multiplyScalar(1);
            object.position.set(-3, 0, 0);
 
            scene.add(object);
        }, onProgress, onError);
 
 
 
        /*var js_loader = new THREE.JSONLoader(manager);
        // json静态模型一
        js_loader.load('./models/hmj/frame001.json', function(geometry, materials){
            var material = new THREE.MultiMaterial(materials);
            var mesh = new THREE.Mesh(geometry, material);
            mesh.scale.multiplyScalar(.06);
            scene.add(mesh);
        }, onProgress, onError);
        // json静态模型二
        var object_loader = new THREE.ObjectLoader(manager);
        object_loader.load('./models/teapot-claraio.json', function(object){
            object.scale.multiplyScalar(5);
            scene.add(object);
        });
        // json动画
        js_loader.load('./models/body/climb.js', function(geometry, materials){
            for(var i = 0; i < materials.length; i++){
                materials[i].skinning = true;
            }
            var material = new THREE.MultiMaterial(materials);
            var mesh = new THREE.SkinnedMesh(geometry, material);
            var mixer = new THREE.AnimationMixer(mesh);
            mixers.push(mixer);
            mixer.clipAction(geometry.animations[0]).play();
            mesh.scale.multiplyScalar(.05);
            mesh.lookAt(new THREE.Vector3(0, 0, 0));
            mesh.position.set(3, 0, 0);
            scene.add(mesh);
        }, onProgress, onError);*/
 
 
 
        /*var obj_loader = new THREE.OBJLoader(manager);
        obj_loader.setPath('./models/mooncake/');
        // obj静态模型一
        var tga_loader = new THREE.TGALoader();
        var material = new THREE.MeshPhongMaterial({
            map: tga_loader.load('./models/mooncake/Sofa_OS_0727_01___Default_Diffuse.tga'),
            normalMap: tga_loader.load('./models/mooncake/Sofa_OS_0727_01___Default_Normal.tga'),
            specularMap: tga_loader.load('./models/mooncake/Sofa_OS_0727_01___Default_S.tga'),
            bumpMap: tga_loader.load('./models/mooncake/Sofa_OS_0727_01___Default_Bump.tga')
        });
        obj_loader.load('mooncake.obj', function(group){
            var geometry = group.children[0].geometry;
            geometry.attributes.uv2 = geometry.attributes.uv;
            geometry.center();
            var mesh = new THREE.Mesh(geometry, material);
            mesh.scale.multiplyScalar(.1);
            scene.add(mesh);
        }, onProgress, onError);
        // obj静态模型二
        THREE.Loader.Handlers.add(/\.tga$/i, new THREE.TGALoader());
        var mtl_loader = new THREE.MTLLoader();
        mtl_loader.setPath('./models/mooncake/');
        mtl_loader.load('mooncake.mtl', function(materials){
            materials.preload();
            obj_loader.setMaterials(materials);
            obj_loader.load('mooncake.obj', function(object){
                object.scale.multiplyScalar(.1);
                scene.add(object);
            }, onProgress, onError);
        });*/
 
        // 创建渲染器
        renderer = new THREE.WebGLRenderer({
            antialias: true,    // 平滑效果
            alpha: true,    // canvas背景透明
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        container.appendChild(renderer.domElement);
 
        // 创建控制器
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0, 0);
 
        animate();
 
        window.addEventListener('resize', onWindowResize, false);
    }
    
    function animate(){
        requestAnimationFrame(animate);
        render();
    }
 
    function render(){
        var delta = clock.getDelta();
        if (mixers.length > 0) {
            for (var i = 0; i < mixers.length; i ++) {
                mixers[i].update(delta);
            }
        }
        controls.update();
        renderer.render( scene, camera );
    }
 
    // 窗口改变重置摄像头
    function onWindowResize(){
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
    }
 
 
</script>
</body>
</html>

本文链接：https://blog.csdn.net/qq_39235055/article/details/106650941

智能推荐

Mybatis源码的下载，搭建以及阅读源码的姿势

源码下载 mybatis的源码是在github上开源的，所以直接从github上搜索下载即可。如上图，第一个就是mybatis3的源码项目，下面几个也是项目中常用的依赖项目，分页插件pagehelper，SSM项目需要引入的依赖mybatis-spring，mybatis-plus项目等。当前最新版本是v3.5.5，可以选择合适的版本下载。我本地选择的是v3.5.4版本，小版本之间没有太大差异...

spring cloud + redis RedisTemplate Api搭建简单Demo

简介 Redis是一种NoSQL数据库，即非关系型数据库。redis是一个key-value存储系统。它支持存储的value类型相对更多，包括string(字符串)、list(链表)、set(集合)、zset(sorted set --有序集合)和hash（哈希类型）。这些数据类型都支持push/pop、add/remove及取交集并集和差集及更丰富的操作，而且这些操作都是原子性的。在此基础上，r...

c++在windows、linux下获取指定文件夹下所有文件名的方法

一般来说，获取指定文件夹下的所有文件名，用python是较为方便的，直接： import os files_name = os.listdir(“一个路径”) 但也有c++程序偶尔也有这个需求，下面就直接上c++在windows和linux去读取文件夹下文件名的方法，不同的系统代码上有一些差别 Windows(vs) vs的环境，主要是用到了头文件<io.h>,...

计算机图形学实验一绘制任意斜率的直线段

一、实验目的（1）掌握任意斜率直线段的重点 Bresenham 扫描转换算法；（2）掌握 Cline 直线类的设计方法；（3）掌握状态栏编程方法。二、实验步骤（1）创建MFC应用程序（2）定义CLine类添加消息处理的处理程序三、实验结果四、实验体会在本次实验中，通过不断的探索和实践，我学会了如何创建一个MFC应用程序，将理论运用于实践...

CSS盒模型

盒子模型盒子模型是什么 CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内...