学习threejs，导入AWD格式的模型

news2025/3/9 22:30:50

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.AWDLoader AWD模型加载器
二、🍀导入AWD格式的模型
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入AWD格式的模型，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.AWDLoader AWD模型加载器

THREE.AWDLoader用于加载和处理AWD格式3D模型文件的扩展。

AWD三维文件：
AWD是一种用于三维场景的二进制格式，通常与AWD引擎一起使用。这个加载程序不支持压缩的AWD文件。

AWD三维模型特点：

二进制格式：AWD是一种二进制格式，这意味着它以二进制代码的形式存储三维模型数据，与文本格式（如OBJ、STL等）相比，二进制格式通常具有更高的加载效率和更小的文件大小。
与Away3D引擎兼容：AWD格式是专门为Away3D引擎设计的，因此与Away3D引擎具有良好的兼容性。使用Away3D引擎可以轻松地加载、渲染和交互AWD格式的三维模型。
高效性：由于采用了二进制格式和针对Away3D引擎的优化，AWD三维模型在加载、渲染和交互方面表现出较高的效率。这使得AWD格式适用于需要实时渲染和交互的三维应用场景，如游戏、虚拟现实等。

应用场景：

游戏开发：在游戏开发中，AWD三维模型可以用于创建游戏中的角色、道具、场景等元素。由于AWD格式具有高效性和易于编辑的特点，因此非常适合用于游戏开发中的三维建模和渲染任务。
虚拟现实：在虚拟现实应用中，AWD三维模型可以用于构建虚拟场景和物体。通过加载AWD格式的三维模型，可以为用户提供更加真实、沉浸式的虚拟现实体验。
建筑可视化：在建筑可视化领域，AWD三维模型可以用于展示建筑设计方案、室内装修效果等。通过调整模型的方向、大小和纹理等参数，可以呈现出逼真的建筑场景和细节。
工业设计：在工业设计中，AWD三维模型可以用于创建产品原型、模拟装配过程等。使用AWD格式可以方便地导出和导入三维模型数据，以便在不同软件之间进行协作和数据交换。

二、🍀导入AWD格式的模型

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3，设置平行光源的位置，scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
5、加载几何模型：创建THREE.AWDLoader加载器loader，loader调用load方法加载‘PolarBear.awd’模型。在load回调函数中，回调函数获取网格对象model，循环model的child，设置child的材质为漫反射材质THREE.MeshLambertMaterial，设置model的范围大小，场景scene中添加model。具体代码参考代码样例。
6、加入THREE.OrbitControls交互控件，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>

<html>

<head>
    <title>导入AWD格式的模型</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/AWDLoader.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <script type="text/javascript" src="../libs/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // 初始化
    function init() {

        var stats = initStats();
        
        // 创建场景
        var scene = new THREE.Scene();

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建渲染器，设置渲染器大小
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        // 设置相机位置和方向
        camera.position.x = 30;
        camera.position.y = 30;
        camera.position.z = 30;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var orbit = new THREE.OrbitControls(camera);

        var dir1 = new THREE.DirectionalLight();
        dir1.position.set(-30, 30, -30);
        scene.add(dir1);

        var dir2 = new THREE.DirectionalLight();
        dir2.position.set(-30, 30, 30);
        scene.add(dir2);

        var dir3 = new THREE.DirectionalLight();
        dir3.position.set(30, 30, -30);
        scene.add(dir3);

        // 添加聚光灯光源，设置光源位置
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(30, 30, 30);
        scene.add(spotLight);

        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        var step = 0;


        var controls = new function () {
        };

        var group;
        var gui = new dat.GUI();


        var loader = new THREE.AWDLoader();
        var group = new THREE.Object3D();
        loader.load("../assets/models/awd/PolarBear.awd", function (model) {
            model.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    child.material = new THREE.MeshLambertMaterial({color: 0xaaaaaa});
                }
            });

            model.scale.set(0.1, 0.1, 0.1);

            scene.add(model);

        });


        render();


        function render() {
            stats.update();
            orbit.update();

            if (group) {
                group.rotation.y += 0.006;
            }

            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();
            stats.setMode(0);

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>