基于HT的CSG功能构建HTML5的3D书架

2023-12-16 13:30

本文主要是介绍基于HT的CSG功能构建HTML5的3D书架,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算,将立方体、圆柱体和棱柱等简单的基础模型,嵌套组合成更复杂三维模型。

CSG的算法这些年来已有各种语言平台版本实现,C++版主流的是 http://opencsg.org/ 已有众多基于该开源类库的应用案例,JavaScript语言较早版实现 http://evanw.github.io/csg.js/ 影响较广,很多其他js衍生版都是基于该版本进行改进完善,包括Java版的实现 https://github.com/miho/JCSG ,可参考基于JavaFX的3D打印IDE https://github.com/miho/JFXScad ,提起JavaFX视乎这些年完全消失在程序员视野毫无声息,但还是有一群拥护者持续在使用着如今地位有点尴尬的JavaFX。

Screen Shot 2014-12-25 at 12.19.17 AM

回到我们今天要搞的3D书架例子,我们将基于HT for Web的3D引擎来实现,HT已经内置了CSG功能的模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作,一般运用中裁剪的方式较为常用,因此CSGNode默认对Host图元的操作就是裁剪。

上图的例子效果可看出我们构建了一个DataModel数据模型,该模型绑定了一个TreeView树组件和两个Graph3dView的三维组件,上部分的Graph3dView组件添加了VisibleFunc的可见过滤器,隐藏了如下部分的Graph3dView中蓝色立方体图元,这些蓝色立方体图元就是CSGNode,其作用就是用来裁剪其吸附的书架Shelf对象,因此一般在3D编辑器状态下才需要出现,运行时科如上部分Graph3dView组件那样,通过添加可见过滤器将其隐藏,这样就实现了有凹槽可摆放书籍内容的3D书架效果,本例我们作为示例仅放了一本《CSS3  The Missing Manual》,这本书其实是由一个六面体,front面显示了书籍贴图,然后旋转一定角度进行摆放,btw《CSS3  The Missing Manual》第三版是本很不错的CSS书籍,强烈推荐!

Screen Shot 2014-12-25 at 12.22.57 AM

书架两边分别摆放了两个不同风格的小书台,通过上图我拖拽改变了蓝色CSGNode图元的位置,大家通过两张图的对比能更直观的体会到CSG的操作效果,玻璃门开关以及相册效果都是直接利用HT for Web的3D引擎提供的模型,通过设置透明度、相片贴图和旋转动画等呢只功能参数即可。

以下是该HT for Web的3D例子的所有JavaScript代码供参考:http://v.youku.com/v_show/id_XODU2MTQ4NjI4.html

ht.Default.setImage('ben12', {width: 100,height: 50,comps: [{type: 'image',name: 'ben1',rect: [0, 0, 50, 50]},{type: 'image',name: 'ben2',rect: [50, 0, 50, 50]}]                
});            function init(){                                 dm = new ht.DataModel();                treeView = new ht.widget.TreeView(dm);                                                                                                 gv1 = new ht.graph3d.Graph3dView(dm);   gv2 = new ht.graph3d.Graph3dView(dm);   splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);   mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   view = mainSplit.getView();  view.className = 'main';document.body.appendChild(view);    window.addEventListener('resize', function (e) {mainSplit.invalidate();}, false);                         gv1.setMoveStep(30);gv1.setGridVisible(true); gv1.setEye(0, 100, 1000);gv1.setCenter(0, 200, 0);gv1.pan(0, 100, true);gv1.getLabel = function(){return null;};gv1.getBrightness = function(data){return null;};gv1.setVisibleFunc(function(data){if(data.showMe){return true;}if(data instanceof ht.CSGNode && data.getHost()){return false;}return true;});gv2.setMoveStep(30);gv2.setEditable(true);gv2.setGridVisible(true); gv2.setEditable(true);gv2.pan(0, 200, true);gv2.getLabel = function(){return null;};                initShelf1();                       initShelf2();                       initShelf3();                       treeView.expandAll();var angle = 0;setInterval(function(){angle += Math.PI/40;earth.r3(0, angle, 0);photos.s('dw.angle', angle);}, 50);                 
}            function initShelf1(){var shelf = new ht.CSGNode();shelf.s3(500, 400, 120);shelf.p3(0, 200, 0);shelf.setName('shelf1');shelf.s({'all.color': '#E5BB77'});dm.add(shelf);for(var i=0; i<2; i++){for(var j=0; j<5; j++){var clipNode = new ht.CSGNode();clipNode.setHost(shelf);clipNode.s3(80, 100, 120);clipNode.p3(-200+j*100, 340-i*120, 20);clipNode.setName('substract-'+i+'-'+j);clipNode.s('batch', 'tt');clipNode.setParent(shelf);dm.add(clipNode);}}var leftNode = new ht.CSGNode();leftNode.setHost(shelf);leftNode.s3(23, 380, 100);leftNode.p3(-255, 200, 0);leftNode.setName('substract left');leftNode.setParent(shelf);dm.add(leftNode);var rightNode = new ht.CSGNode();rightNode.setHost(shelf);rightNode.s3(23, 380, 100);rightNode.p3(255, 200, 0);rightNode.setName('substract right');rightNode.setParent(shelf);dm.add(rightNode);var bottomNode = new ht.CSGNode();bottomNode.setHost(shelf);bottomNode.s3(480, 140, 140);bottomNode.p3(0, 80, 0);bottomNode.setName('substract bottom');bottomNode.setParent(shelf);dm.add(bottomNode);  var topNode = new ht.CSGNode();topNode.setHost(shelf);topNode.s3(480, 10, 100);topNode.p3(0, 400, 0);topNode.setName('union top');topNode.s('attach.operation', 'union');topNode.setParent(shelf);dm.add(topNode);  var book = new ht.Node();book.setName('CSS3: The Missing Manual');book.s3(60, 80, 8);book.p3(-100, 210, 20);book.r3(-Math.PI/6, Math.PI/5, 0);book.setIcon('book');book.s({'front.image': 'book','back.color': 'white','left.color': 'white','all.color': 'gray'});book.setHost(shelf);book.setParent(shelf);dm.add(book);                                }function initShelf2(){                var shelf = new ht.CSGNode();shelf.s3(120, 240, 120);shelf.p3(0, 120, 0);shelf.setName('shelf2');shelf.s({'all.color': '#805642','csg.color': 'yellow','csg.reverse.flip': true});dm.add(shelf);var clipNode = new ht.CSGNode();clipNode.setName('shelf2-substract-up');clipNode.s3(100, 100, 130);clipNode.p3(0, 180, 0);clipNode.setHost(shelf);clipNode.s('attach.cull', true);clipNode.setParent(shelf);dm.add(clipNode);clipNode = new ht.CSGBox();clipNode.setName('CSGBox-Expand-Left');clipNode.s3(100, 100, 120);clipNode.p3(0, 65, 0.1);clipNode.setHost(shelf);clipNode.showMe = true;clipNode.s({'all.visible': false,'front.visible': true,'front.toggleable': true,                    'front.reverse.flip': true,'front.transparent': true,'front.end': Math.PI * 0.7,'front.color': 'rgba(0, 50, 50, 0.7)'});clipNode.setParent(shelf);clipNode.setFaceExpanded('front', true, true);dm.add(clipNode);                earth = new ht.Node();earth.setName('earth');earth.setIcon('earth');earth.s3(70, 70, 70);earth.p3(0, 50, 0);earth.s({'shape3d': 'sphere','shape3d.image': 'earth'});earth.setHost(shelf);  earth.setParent(shelf);dm.add(earth);shelf.t3(-360, 0, 50);shelf.r3(0, Math.PI/7, 0);                               
}            function initShelf3(){                var shelf = new ht.CSGNode();shelf.s3(120, 240, 120);shelf.p3(0, 120, 0);shelf.setName('shelf3');shelf.setIcon('ben');shelf.s({'all.image': 'brick','all.uv.scale': [2, 4],'top.uv.scale': [2, 2],'bottom.uv.scale': [2, 2],                                                             'csg.image': 'ben','csg.blend': 'yellow'});dm.add(shelf);photos = new ht.DoorWindow();photos.setName('DoorWindow-Photos');photos.setIcon('ben12');photos.s3(110, 100, 130);photos.p3(5, 180, 0);                photos.setHost(shelf);  photos.showMe = true;photos.s({                    'bottom.uv': [1,1, 1,0, 0,0, 0,1],'bottom.uv.scale': [1, 1],'left.uv.scale': [3, 3],'top.uv.scale': [2, 2],'dw.s3': [0.8, 0.9, 0.05],'dw.t3': [0, -5, 0],'dw.axis': 'v','dw.toggleable': false,'front.image': 'ben1','back.image': 'ben2','all.color': '#F8CE8B'});photos.setParent(shelf);dm.add(photos);var clipNode = new ht.CSGBox();clipNode.setName('CSGBox-Expand-Top');clipNode.s3(100, 100, 120);clipNode.p3(0, 65, 0.1);clipNode.setHost(shelf);clipNode.showMe = true;clipNode.s({                    'all.visible': false,'front.visible': true,'front.color': 'red','front.transparent': true,'front.opacity': 0.7,                    'front.reverse.flip': true,'front.toggleable': true,                                        'front.axis': 'top','front.end': Math.PI * 0.4});clipNode.setParent(shelf);clipNode.setFaceExpanded('front', true, true);dm.add(clipNode);                shelf.t3(360, 0, 50);shelf.r3(0, -Math.PI/7, 0);}   

 

这篇关于基于HT的CSG功能构建HTML5的3D书架的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/500636

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能