文档章节

快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型

xhload3d
 xhload3d
发布于 03/13 07:57
字数 2645
阅读 1690
收藏 32
点赞 0
评论 2

前言

3D 场景中的面不只有水平面这一个,空间是由无数个面组成的,所以我们有可能会在任意一个面上放置物体,而空间中的面如何确定呢?我们知道,空间中的面可以由一个点和一条法线组成。这个 Demo 左侧为面板,从面板中拖动物体到右侧的 3D 场景中,当然,我鼠标拖动到的位置就是物体放置的点,但是这次我们的重点是如何在斜面上放置模型。

效果图

 

代码生成

创建场景

dm = new ht.DataModel();//数据模型(http://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html)
g3d = new ht.graph3d.Graph3dView(dm);//3D 场景组件(http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html)
palette = new ht.widget.Palette();//面板组件(http://hightopo.com/guide/guide/plugin/palette/ht-palette-guide.html)
splitView = new ht.widget.SplitView(palette, g3d, 'h', 0.2);//分割组件,第三个参数为分割的方式 h 为左右分,v 为上下分;第四个参数为分割比例,大于 1 的值为绝对宽度,小于 1 则为比例
splitView.addToDOM();//将分割组件添加进 body 体中

关于这些组件的定义可以到对应的链接里面查看,至于将分割组件添加进 body 体中的 addToDOM 函数有必要解释一下(我每次都提,这个真的很重要!)。

HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用,而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中,这里需要注意的是,当父容器大小变化时,如果父容器是 BorderPane 和 SplitView 等这些HT预定义的容器组件,则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素, 则 HT 组件无法获知需要更新,因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件,调用最外层组件 invalidate 函数进行更新。

为了最外层组件加载填充满窗口的方便性,HT 的所有组件都有 addToDOM 函数,其实现逻辑如下,其中 iv 是 invalidate 的简写:

addToDOM = function(){
    var self = this,
        view = self.getView(),//获取组件的底层 div
        style = view.style;
    document.body.appendChild(view);//将组件底层div添加进body中
    style.left = '0';//ht 默认将所有的组件的position都设置为absolute绝对定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小改变事件,调用刷新函数
}

大家可能注意到了,场景中我添加的斜面实际上就是一个 ht.Node 节点,作为与地平面的参照,在这样的对比下立体感会更强一点。下面是这个节点的定义:

node = new ht.Node();
node.s3(1000, 1, 1000);//设置节点的大小
node.r3(0, 0, Math.PI/4);//设置节点旋转 这个旋转的角度是有学问的,跟下面我们要设置的拖拽放置的位置有关系
node.s('3d.movable', false);//设置节点在3d上不可移动 因为这个节点只是一个参照物,建议是不允许移动
dm.add(node);//将节点添加进数据容器中

左侧内容构建

Palette 和 GraphView 类似,由 ht.DataModel 驱动,用 ht.Group 展示分组,ht.Node 展示按钮元素。我将加载 Palette 面板中的图元函数封装为 initPalette,定义如下:

function initPalette() {//加载palette面板组件中的图元
    var arrNode = ['displayDevice', 'cabinetRelative', 'deskChair', 'temperature', 'indoors', 'monitor','others'];
    var nameArr = ['展示设施', '机柜相关', '桌椅储物', '温度控制', '室内', '视频监控', '其他'];//arrNode中的index与nameArr中的一一对应
    
    for (var i = 0; i < arrNode.length; i++) {
        var name = nameArr[i];
        var vName = arrNode[i];

        arrNode[i] = new ht.Group();//palette面板是将图元都分在“组”里面,然后向“组”中添加图元即可
        palette.dm().add(arrNode[i]);//向palette面板组件中添加group图元
        arrNode[i].setExpanded(true);//设置分组为打开的状态
        arrNode[i].setName(name);//设置组的名字 显示在分组上
        
        var imageArr = [];
        switch(i){//根据不同的分组设置每个分组中不同的图元
            case 0:
                imageArr = ['models/机房/展示设施/大屏.png'];
                break;
            case 1: 
                imageArr = ['models/机房/机柜相关/配电箱.png', 'models/机房/机柜相关/室外天线.png', 'models/机房/机柜相关/机柜1.png', 
                            'models/机房/机柜相关/机柜2.png', 'models/机房/机柜相关/机柜3.png', 'models/机房/机柜相关/机柜4.png', 
                            'models/机房/机柜相关/电池柜.png'];
                break;
            case 2: 
                imageArr = ['models/机房/桌椅储物/储物柜.png', 'models/机房/桌椅储物/桌子.png', 'models/机房/桌椅储物/椅子.png'];
                break;
            case 3: 
                imageArr = ['models/机房/温度控制/空调精简.png', 'models/机房/消防设施/消防设备.png'];
                break;
            case 4:
                imageArr = ['models/室内/办公桌简易.png', 'models/室内/书.png', 'models/室内/办公桌镜像.png', 'models/室内/办公椅.png'];
                break;
            case 5:
                imageArr = ['models/机房/视频监控/摄像头方.png', 'models/机房/视频监控/对讲维护摄像头.png', 'models/机房/视频监控/微型摄像头.png'];
                break;
            default: 
                imageArr = ['models/其他/信号塔.png'];
                break;
        }
        setPalNode(imageArr, arrNode[i]);//创建palette上节点及设置名称、显示图片、父子关系
    }
}

我在 setPalNode 函数中做了一些名称的设置,主要是想要根据上面 initPalette 函数中我传入的路径名称来设置模型的名称以及在不同文件在不同的文件夹下的路径:

function setPalNode(imageArr, arr) {
    for (var j = 0; j < imageArr.length; j++) {
        var imageName = imageArr[j];
        var jsonUrl = imageName.slice(0, imageName.lastIndexOf('.')) + '.json';//shape3d中的 json 路径
        var name = imageName.slice(imageName.lastIndexOf('/')+1, imageName.lastIndexOf('.')); //取最后一个/和.之间的字符串用来设置节点名称
        var url = imageName.slice(imageName.indexOf('/')+1, imageName.lastIndexOf('.'));//取第一个/和最后一个.之间的字符串用来设置拖拽生成模型obj文件的路径
        
        createNode(name, imageName, arr, url, jsonUrl);//创建节点,这个节点是显示在palette面板上
    }
}

createNode 创建节点的函数比较简单:

function createNode(name, image, parent, urlName, jsonUrl) {//创建palette面板组件上的节点
    var node = new ht.Node();
    palette.dm().add(node);
    node.setName(name);//设置节点名称 palette面板上显示的文字也是通过这个属性设置名称
    node.setImage(image);//设置节点的图片
    node.setParent(parent);//设置父亲节点
    node.s({
        'draggable': true,//设置节点可拖拽
        'image.stretch': 'centerUniform',//设置节点图片的绘制方式
        'label': ''//设置节点的label为空,这样即使设置了name也不会显示在3d中的模型下方
    });
    node.a('urlName', urlName);//a设置用户自定义属性
    node.a('jsonUrl', jsonUrl);
    return node;
}

虽然简单,但是还是要提一下,draggable: true 为设置节点可拖拽,否则节点不可拖拽;还有 node.s 是 HT 默认封装好的样式设置方法,如果用户需要自己添加方法,则可通过 node.a 方法来添加,参数一为用户自定义名称,参数二为用户自定义值,不仅能传常量,也能传变量、对象,还能传函数!又是一个非常强大的功能。

拖拽功能

拖拽基本上就是响应 windows 自带的 dragover 以及 drop 事件,要在放开鼠标的时候创建模型,就要在事件触发时生成模型:

function dragAndDrop() {//拖拽功能
    g3d.getView().addEventListener("dragover", function(e) {//拖拽事件
        e.dataTransfer.dropEffect = "copy";
        handleOver(e);
    });
    g3d.getView().addEventListener("drop", function(e) {//放开鼠标事件
        handleDrop(e);
    });
}

function handleOver(e) {
    e.preventDefault();//取消事件的默认动作。
}

function handleDrop(e) {//鼠标放开时
    e.preventDefault();//取消事件的默认动作。
    
    var paletteNode = palette.dm().sm().ld();//获取palette面板中最后选中的节点
    if (paletteNode) {
        loadObjFunc('assets/objs/' + paletteNode.a('urlName') + '.obj', 'assets/objs/' + paletteNode.a('urlName') + '.mtl', 
                             paletteNode.a('jsonUrl'), g3d.getHitPosition(e, [0, 0, 0], [-1, 1, 0]));//加载obj模型
    }
}

这里完全有必要说明一下,这个 Demo 的重点来了! loadObjFunc 函数中的最后一个参数为生成模型的 position3d 坐标,g3d.getHitPosition 这个方法总共有三个参数,第一个参数为事件类型,第二和第三个参数如果不设置,则默认为水平面的中心点也就是 [0, 0, 0] 以及法线为 y 轴,也就是 [0, 1, 0],一条法线和一个点就可以确定一个面,所以我们通过这个方法来设置这个节点所要放置的平面是在哪一个面上,我前面将 node 节点设置为绕 z 轴旋转 45° 角,所以这边的法线也就要好好想想如何设置了,这是数学上的问题,要自己思考了。

加载模型

HT 通过 ht.Default.loadObj 函数来加载模型,但是前提是要有一个节点,然后再在这个节点上加载模型:

function loadObjFunc(objUrl, mtlUrl, jsonUrl, p3) {//加载obj模型
    var node = new ht.Node();
    var shape3d = jsonUrl.slice(jsonUrl.lastIndexOf('/')+1, jsonUrl.lastIndexOf('.'));
    
    ht.Default.loadObj(objUrl, mtlUrl, {//HT 通过 loadObj 函数来加载 obj 模型
        cube: true,//是否将模型缩放到单位1的尺寸范围内,默认为false
        center: true,//模型是否居中,默认为false,设置为true则会移动模型位置使其内容居中
        shape3d: shape3d,//如果指定了shape3d名称,则HT将自动将加载解析后的所有材质模型构建成数组的方式,以该名称进行注册
        finishFunc: function(modelMap, array, rawS3) {//用于加载后的回调处理
            if (modelMap) {
                node.s({//设置节点样式
                    'shape3d': jsonUrl,//jsonUrl 为 obj 模型的 json 文件路径
                    'label': ''//设置label为空,label的优先级高于name,所以即使设置了name,节点的下方也不会显示name名称
                });
                g3d.dm().add(node);//将节点添加进数据容器中

                node.s3(rawS3);//设置节点大小 rawS3 模型的原始尺寸
                node.p3(p3);//设置节点的三维坐标
                node.setName(shape3d);//设置节点名称
                node.setElevation(node.s3()[1]/2);//控制Node图元中心位置所在3D坐标系的y轴位置
                g3d.sm().ss(node);//设置选中当前节点
                g3d.setFocus(node);//将焦点设置在当前节点上
                return node;
            }
        }
    });
}

代码结束!

总结

说实在的这个 Demo 真的是非常容易,难度可能在于空间思维能力了,先确认法线和点,然后根据法线和点找到那个面,这个面按照我的这种方式有个对照还比较能够理解,真幻想的话,可能容易串。这个 Demo 容易主要还是因为封装的 hitPosition 函数简单好用,这个真的是功不可没。

© 著作权归作者所有

共有 人打赏支持
xhload3d
粉丝 175
博文 147
码字总数 286340
作品 0
崇明
加载中

评论(2)

蓝水晶飞机
蓝水晶飞机
:+1: 了解一下,现在有些3D家居设计软件已经基于HTML5了
MGL_TECH
MGL_TECH
mark
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw ⋅ 2017/12/16 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

白鹭引擎和layabox哪个好用,哪个技术更成熟 ?

作者:匿名用户 链接:https://www.zhihu.com/question/37819832/answer/104230057 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。...

wangyihero8 ⋅ 04/11 ⋅ 0

实战分享:淘宝Web 3D应用与游戏开发

大家下午好!我们今天讲个比较有意思的话题,这个话题在业界被谈及得比较少。大家在座有做过移动端开发的同学吗?请举个手,人还挺多的。那做过3D应用的同学请举个手,有用过Threejs的请举个...

技术小能手 ⋅ 05/31 ⋅ 0

AR/VR 开发工具 Amazon Sumerian 正式上线

去年 AWS 赶在 re:Invent 大会前,推出 AR/VR 开发工具 Amazon Sumerian,让开发者可以在 Oculus Rift、HTC Vive、iOS 移动装置,甚至网页浏览器环境制作3D、虚拟现实或增强现实(VR/AR)应用...

雨田桑 ⋅ 05/18 ⋅ 0

WebGL编程指南(2)绘制和变换三角形

书本源代码 https://download.csdn.net/download/qfire/10371055 2.1 绘制多个点 不管三维模型的形状多么复杂,其基本组成部分都是三角形,只不过复杂的模型由更多的三角形构成而已。 WebGL提...

qfire ⋅ 04/24 ⋅ 0

《WebGL编程指南》学习笔记——4.绘制一个点

《WebGL编程指南》学习笔记——4.绘制一个点 之前,我们学习了如何建立一个WebGL程序,如何使用一些简单的WebGL相关函数。这一节,我们进一步在一个示例程序中绘制一个最简单的图形:一个点。...

hushhw ⋅ 2017/12/24 ⋅ 0

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

WebGL 可视化引擎 - CesiumJS

Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库,无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化;跨平台、跨浏览器;并且针对动态数据进行可视化。 Cesium 基于 ...

匿名 ⋅ 2015/03/25 ⋅ 2

TensorFlow.js 0.10.3 发布,在浏览器中训练 ML 模型

TensorFlow.js 是一个开源硬件加速 JavaScript 库,用于训练和部署机器学习模型。 TensorFlow.js 0.10.3 已发布,包含大量更新: Core (0.7.1 ==> 0.8.4) Add tf.toPixels Add tf.erf op Add...

王练 ⋅ 04/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim基础-编辑模式-命令模式

编辑模式:可以编辑修改文件。编辑模式下 按“esc”键返回一般模式。 按一次“Insert”键 (一般在键盘回格键右边)作用和“i”一样表示“插入”。按两次“Insert”键表示“替换”,作用为:...

ZHENG-JY ⋅ 17分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

阿里云云栖社区 ⋅ 22分钟前 ⋅ 0

Linux操作系统有何优势?Linux学习

  当今世界流行的操作系统有3大类,Linux、Mac OS和Windows操作系统,Linux操作系统因其开源、免费、跨平台、良好的界面等特性,深受广大程序员们的青睐!   Linux操作系统被广泛的应用于...

老男孩Linux培训 ⋅ 23分钟前 ⋅ 0

Spring Cloud Spring Boot mybatis分布式微服务云架构 开发Web应用

静态资源访问 在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /static /pub...

itcloud ⋅ 27分钟前 ⋅ 0

6月19日任务 设置更改root密码、连接mysql、mysql常用命令

13.1 设置更改root密码 1. /usr/local/mysql/bin/mysql -uroot 设置环境变量 : export PATH=$PATH:/usr/local/mysql/bin/ 永久生效: vim /etc/profile 加入 export PATH=$PATH:/usr/local/m......

吕湘颖 ⋅ 29分钟前 ⋅ 0

MaxCompute读取分析OSS非结构化数据的实践经验总结

摘要: 本文背景 很多行业的信息系统中,例如金融行业的信息系统,相当多的数据交互工作是通过传统的文本文件进行交互的。此外,很多系统的业务日志和系统日志由于各种原因并没有进入ELK之类...

猫耳m ⋅ 30分钟前 ⋅ 0

Spring MVC controller,return重定向redirect:

@RequestMapping(value="/save",method=RequestMethod.POST)public String doSave(Course course) {log.debug("Info of Course");log.debug(ReflectionToStringBuilder.toStr......

颖伙虫 ⋅ 38分钟前 ⋅ 0

JavaSE——线程介绍

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 线程: 介绍:管线程叫多任务处理,首先你得知道...

凯哥学堂 ⋅ 41分钟前 ⋅ 0

ORM——使用spring jpa data实现逻辑删除

前言 在业务中是忌讳物理删除数据的,数据的这个对于一个IT公司可以说是最核心的资产,如果删除直接就物理删除,无疑是对核心资产的不重视,可能扯的比较远,本文最主要是想通过spring jpa ...

alexzhu592 ⋅ 48分钟前 ⋅ 0

CDN caching

Incapsula应用感知CDN使用智能分析和频率分析来动态缓存内容,并最大限度地提高效率。确保可直接从RAM获取最常访问的资源,而不依赖于较慢的访问机制。 1、 静态内容缓存 Incapsula缓存静态内...

上树的熊 ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部