使用AxisHelper帮助理解View and Data API中的坐标系统

简介:


大家使用View and Data API做三维模型开发,必然首先要理解View and Data API的坐标系统,即XYZ三个轴向分别是怎么定义的。Three.js里面提供了一个AxisHelper,但如果你直接运用的话,你会发现在viewer中并不显示,并且控制台中会有这样的错误信息:"Only THREE.Mesh can be rendered by the Firefly renderer. Use THREE.Mesh to draw lines."  原因是因为View and Data API采用的是Three.js上定制的render,有些three.js中可以使用的功能在viewer中并不能用。所以我重写了一个这样的AxisHelper,希望对你有帮助。

 

使用非常简单,只需要加载这个扩展即可。建议在GEOMETRY_LOADED_EVENT事件中加载:

// It is recommended to load the extension when geometry is loaded
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, 
   function(){

   viewer.loadExtension('Autodesk.ADN.Viewing.Extension.AxisHelper');

   });

下面是截图,你可以看到红线是X轴,绿线是Y轴,蓝线是Z轴。请注意和右上角的view cube的对应关系。

Screen Shot 2015-12-10 at 2.38.34 PM

下面是这个扩展的源代码,不过最好到 github 上下载,因为我可能会时不时的做更新,github上的才是最新的。

///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");

Autodesk.ADN.Viewing.Extension.AxisHelper = function (viewer, options) {

    Autodesk.Viewing.Extension.call(this, viewer, options);

    var _self = this;

    var _axisLines = [];

    _self.load = function () {

        console.log('Autodesk.ADN.Viewing.Extension.AxisHelper loaded');

        addAixsHelper();

        //workaround
        //have to call this to show up the axis
        viewer.restoreState(viewer.getState());

        return true;
    };



    _self.unload = function () {

        removeAixsHelper();

        console.log('Autodesk.ADN.Viewing.Extension.AxisHelper unloaded');
        return true;
    };


    var addAixsHelper = function() {

        _axisLines = [];

        //get bounding box of the model
        var boundingBox = viewer.model.getBoundingBox();
        var maxpt = boundingBox.max;
        var minpt = boundingBox.min;
     
        var xdiff =    maxpt.x - minpt.x;
        var ydiff =    maxpt.y - minpt.y;
        var zdiff =    maxpt.z - minpt.z;

        //make the size is bigger than the max bounding box 
        //so that it is visible 
        var size = Math.max(xdiff,ydiff,zdiff) * 1.2; 
        //console.log('axix size :' + size);


        // x-axis is red
        var material_X_Axis = new THREE.LineBasicMaterial({
            color: 0xff0000,  //red 
            linewidth: 2
        });
        viewer.impl.matman().addMaterial('material_X_Axis',material_X_Axis,true);
        //draw the x-axix line
        var xLine = drawLine(
            {x : 0, y : 0, z : 0} ,
            {x : size, y : 0, z : 0} , 
            material_X_Axis);
       
        _axisLines.push(xLine);


        // y-axis is green
        var material_Y_Axis = new THREE.LineBasicMaterial({
            color: 0x00ff00,  //green 
            linewidth: 2
        });
        viewer.impl.matman().addMaterial('material_Y_Axis',material_Y_Axis,true);
        //draw the y-axix line
        var yLine = drawLine(
            {x : 0, y : 0, z : 0} ,
            {x : 0, y : size, z : 0} , 
            material_Y_Axis);
        
        _axisLines.push(yLine);


        // z-axis is blue
        var material_Z_Axis = new THREE.LineBasicMaterial({
            color: 0x0000ff,  //blue 
            linewidth: 2
        });
        viewer.impl.matman().addMaterial('material_Z_Axis',material_Z_Axis,true);
        //draw the z-axix line
        var zLine = drawLine(
            {x : 0, y : 0, z : 0} ,
            {x : 0, y : 0, z : size} , 
            material_Z_Axis);
      
        _axisLines.push(zLine);


    }


    var drawLine = function(start, end, material) {

            var geometry = new THREE.Geometry();

            geometry.vertices.push(new THREE.Vector3(
                start.x, start.y, start.z));

            geometry.vertices.push(new THREE.Vector3(
                end.x, end.y, end.z));

            var line = new THREE.Line(geometry, material);

            viewer.impl.scene.add(line);
            //refresh viewer
            viewer.impl.invalidate(true);

            return line;
    }

    var removeAixsHelper = function() {

        _axisLines = [];

        _axisLines.forEach(function(line){

            viewer.impl.scene.remove(line);
        });

        //remove materials
        delete viewer.impl.matman().materials.material_X_Axis;
        delete viewer.impl.matman().materials.material_Y_Axis;
        delete viewer.impl.matman().materials.material_Z_Axis;

        
    }


};

Autodesk.ADN.Viewing.Extension.AxisHelper.prototype =
    Object.create(Autodesk.Viewing.Extension.prototype);

Autodesk.ADN.Viewing.Extension.AxisHelper.prototype.constructor =
    Autodesk.ADN.Viewing.Extension.AxisHelper;

Autodesk.Viewing.theExtensionManager.registerExtension(
    'Autodesk.ADN.Viewing.Extension.AxisHelper',
    Autodesk.ADN.Viewing.Extension.AxisHelper);

Hope it helps.

作者: 峻祁连
邮箱:junqilian@163.com 
出处: http://junqilian.cnblogs.com 
转载请保留此信息。




本文转自峻祁连. Moving to Cloud/Mobile博客园博客,原文链接:http://www.cnblogs.com/junqilian/p/5036078.html ,如需转载请自行联系原作者
相关文章
地址描述转换为坐标点不使用API,有什么转换的方法?
地址描述转换为坐标点不使用API,有什么转换的方法?
423 64
|
2月前
|
2025宝塔API一键建站系统PHP源码
2025宝塔API一键建站系统PHP源码
160 90
API数据源:轻松接入各类业务系统数据
在数字化转型中,企业面临多样化的数据需求。Quick BI推出API数据源功能,支持广泛的数据接入,包括实时天气、电商交易及内部业务数据,极大丰富了可分析数据范围。该功能提供灵活的连接方式(抽取和直连模式)、多元授权机制(基础认证、前置请求)和自动化数据解析,降低了操作门槛,提升了配置效率。通过动态Token获取等最佳实践,确保数据安全与实时性,满足企业具体业务需求。了解更多,请访问Quick BI官方文档或瓴羊官网。
172 77
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件,并生成相应的图片链接,从而方便用户在网页、社交媒体或其他平台上分享图片。
34 2
单页图床HTML源码+本地API接口图床系统源码
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
57 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
java语言后台管理若依框架-登录提示404-接口异常-系统接口404异常如何处理-登录验证码不显示prod-api/captchaImage 404 (Not Found) 如何处理-解决方案优雅草卓伊凡
99 5
自学记录HarmonyOS Next DRM API 13:构建安全的数字内容保护系统
在完成HarmonyOS Camera API开发后,我深入研究了数字版权管理(DRM)技术。最新DRM API 13提供了强大的工具,用于保护数字内容的安全传输和使用。通过学习该API的核心功能,如获取许可证、解密内容和管理权限,我实现了一个简单的数字视频保护系统。该系统包括初始化DRM模块、获取许可证、解密视频并播放。此外,我还配置了开发环境并实现了界面布局。未来,随着数字版权保护需求的增加,DRM技术将更加重要。如果你对这一领域感兴趣,欢迎一起探索和进步。
103 18
探秘驱动软件系统高效协同的高效协同之API接口
在数字化时代,API(应用程序编程接口)作为现代软件开发的核心组件,犹如无形的桥梁,连接不同应用、平台和服务,促进数据和功能自由流动。本文深入探讨API的基本概念、工作原理、核心组成部分及其在现代软件开发中的应用与最佳实践。通过统一数据格式、确保安全性和实施版本控制,API助力高效协同,并在社交媒体、物联网及企业系统中展现出巨大价值。未来,API将朝着智能化方向发展,同时面临并解决安全挑战,推动各行业的数字化转型。
144 6
Winform管理系统新飞跃:无缝集成SqlSugar与Web API,实现数据云端同步的革新之路!
【8月更文挑战第3天】在企业应用开发中,常需将Winform桌面应用扩展至支持Web API调用,实现数据云端同步。本文通过实例展示如何在已有SqlSugar为基础的Winform系统中集成HTTP客户端调用Web API。采用.NET的`HttpClient`处理请求,支持异步操作。示例包括创建HTTP辅助类封装请求逻辑及在Winform界面调用API更新UI。此外,还讨论了跨域与安全性的处理策略。这种方法提高了系统的灵活性与扩展性,便于未来的技术演进。
333 2
基于SqlSugar的开发框架循序渐进介绍(23)-- Winform端管理系统中平滑增加对Web API对接的需求
基于SqlSugar的开发框架循序渐进介绍(23)-- Winform端管理系统中平滑增加对Web API对接的需求

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等