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

three.js 加载 .FBX.OBJ模型文件网页嵌入模型展示（vue项目）直接用iframe嵌套注意必须在服务器的环境下启动这个软件就挺不错的（www文件目录下）<iframe src="http://localhost:8080/model/index.html" frameborder="no" border="0" allowtransparency="true" mozall

码成一棵树

3089人浏览 · 2020-06-09 21:07:58

码成一棵树 · 2020-06-09 21:07:58 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^