search

JXtreehouse / three.js-lessions

学习仓库
4 stars 3 forks source link

Threejs中导入以上外部模型文件所需的辅助函数是哪些？ #3

Open AlexZ33 opened 3 years ago

AlexZ33 commented 3 years ago

threejs中导入外部文件所需的辅助函数都在

https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders

下可以找到。这里除了JSON模型文件的导入外，其余模型文件都需要引用其对应名称的辅助函数。例如：导入OBJ格式的模型，除了导入必要的three.js文件外，还需要在界面中引用OBJLoader.js文件。而JSONLoader函数集成在three.js中，所以无需再导入其他辅助文件！

支持的加载器(模型文件格式):

AlexZ33 commented 3 years ago

Threejs中几个常用模型文件导入示例

https://www.jianshu.com/p/906072e60197

Loaders加载模型到Three.js

THREE.js中加载不同格式的模型及动画(fbx、json和obj)

从3dMax导出供threeJS使用的带动作模型与加载（认真修改详尽版）

JSON格式文件导入——使用JSONLoader函数

// 实例化一个JSONLoader类
var loader = new THREE.JSONLoader();
// 导入资源
loader.load(
    // 导入的模型文件所在 URL
    'models/animated/monster/monster.js',
    // 资源加载成功后执行的函数
        //@params geometry  传入的模型，只能是单个模型，不能是一个场景
       // @params materials  传入的材质，是个数组 
    function ( geometry, materials ) {
        var material = materials[ 0 ];
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );

    }
AlexZ33 commented 3 years ago

加载STL模型

一直以来，如何对特定的模型进行读取和渲染操作是开发人员的难题。

储存３Ｄ模型的文件格式和标准：

1. STL模型的基本知识

STL 为 stereolithography 的缩写， 含义为光固化立体造型 术。 1988 年 3D SYSTEMS 公司将其制定为接口协议。 STL 是 一种为快速原型制造技术服务的三维图形文件格式。 由于其 具有解析简单， 文件体积较小等优点， 被广泛用于工业领域。 STL 将三角形作为基础图形， 对模型表面进行组织， 因此 十分适合在电子设备上进行绘制。 同时三角形的面可以表现 流畅的曲线， 使模型外观更加细腻， 所以说使用 STL 文件对 构建高质量模型发挥重要作用。 正是由于其具有上述特性， 最近发展异常火热的3D 打印技术都是以STL 作为标准格式。 STL 格式模型在 3DS Max 中的展示效果如图1 所示。

image

目前的 STL 文件格式包括二进制文件 (BINARY) 和文本 文件 (ASCII) 两种。 下面将分别对这两种格式的解析方法进 行介绍。

1.1 STL 文本文件的解析方法

STL 文本文件以行为单位顺序给出三角形面片的相关数 据。 每行的开头为一到两个关键字， 表明后面数据的相关含 义。 STL 文件中的关键字 facet 代表一个三角形面片的信息单 元。 此单元中包括关键字vertex 和 normal， 分别代表三角形的

顶点坐标和法向量数据。 若干个三角形面片相互组织就形成了最终的STL 三维模 型， 具体格式说明如下所示： 

solid filename stl //自定义文件头 facet normal x y z //三角面片的法向量 outer loop vertex x y z //第一个顶点坐标 vertex x y z //第二个顶点坐标 vertex x y z //第三个顶点坐标 endloop endfacet //完成一个三角面片定义 … //省略了其他数据信息 endsolid filename stl //定义结束

1.2 vscode 3d模型预览插件

image

image

1.3 threejs & STL

STL是STLereoLithography（立体成型术）的缩写，广泛用于快速成型。例如三维打印机的模型文件通常是STL文件。 Three.js对STL文件的加载器STLLoader.js，此文件封装了读取STL二进制文件和STL文本文件数据并初始化网格体的方法。 Three.js还有一个可定制的STL导出器，叫作OBJExporter.js，可以用来将Three.js中的模型导出到一个OBJ文件。

实现案例

案例查看地址：https://jxtreehouse.github.io/three.js-lessions/%E6%95%99%E7%A8%8B/examples/9_import_stl_model.html 首先，引入script加载器

<script src="/lib/js/loaders/STLLoader.js"></script>

加载ＳＴＬ模型之前，需要使用threejs对整个渲染场景进行初始化, 主要包括新建场景、设置摄像机位置和焦点、光源位置等相关操作。 渲染场景初始化工作完成以后，接下来就可以对STL模型进行加载了，主要思路： 　- 先创建一个STL格式的加载器 　- 创建完成后利用加载器load方法对模型进行加载， 　　　　- load方法中第一个参数为STL模型所在位置和名称， 　　　　- 第二个参数为STL文件读取完后，程序需要进行的一系列操作，通常包括设置模型的材质和设置缩放倍数 然后，实例化加载器对象，然后加载模型，STL模型里面只保存了几何体，所以我们实例化了一个纹理，添加到场景当中

image

var loader = new THREE.STLLoader();
loader.load("/lib/assets/models/SolidHead_2_lowPoly_42k.stl", function (geometry) {
    //创建纹理
    var mat = new THREE.MeshLambertMaterial({color: 0x00ffff});
    var mesh = new THREE.Mesh(geometry, mat);
    mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
    mesh.scale.set(0.1, 0.1, 0.1); //缩放
    geometry.center(); //居中显示
    scene.add(mesh);
});

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<body onload="draw();">

</body>
<script src="/lib/three.js"></script>
<script src="/lib/js/loaders/STLLoader.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="/lib/js/libs/stats.min.js"></script>
<script src="/lib/js/libs/dat.gui.min.js"></script>

<script>
    var renderer;
    function initRender() {
        // 新建渲染器
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.setClearColor(0xffffff);
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
        // 设置摄像机位置和焦点
        camera.position.set(0, 40, 50);
        camera.lookAt(new THREE.Vector3(0,0,0));
　　
    }

    var scene;
    function initScene() {
　　// 新建场景
        scene = new THREE.Scene();
    }

    //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
    }

    var light;
    function initLight() {
        scene.add(new THREE.AmbientLight(0x444444));

        light = new THREE.PointLight(0xffffff);
　　// 设置光源位置
        light.position.set(0,50,50);

        //告诉平行光需要开启阴影投射
        light.castShadow = true;
        // 添加光源到场景
        scene.add(light);
    }

    function initModel() {

        //辅助工具
        var helper = new THREE.AxesHelper(50);
        scene.add(helper);

        var loader = new THREE.STLLoader();
        loader.load("/lib/assets/models/SolidHead_2_lowPoly_42k.stl", function (geometry) {
            //创建纹理
            var mat = new THREE.MeshLambertMaterial({color: 0x00ffff});
            var mesh = new THREE.Mesh(geometry, mat);
            mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
            mesh.scale.set(0.1, 0.1, 0.1); //缩放
            geometry.center(); //居中显示
            scene.add(mesh);
        });
    }

    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls( camera, renderer.domElement );

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.5;
        //设置相机距离原点的最远距离
        controls.minDistance  = 1;
        //设置相机距离原点的最远距离
        controls.maxDistance  = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {

        renderer.render( scene, camera );
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>

在线预览： https://jxtreehouse.github.io/three.js-lessions/%E6%95%99%E7%A8%8B/examples/9_import_stl_model.html

1.4 API 详解

image

image

AlexZ33 commented 3 years ago

glTF格式

[3d图形]glTF格式