html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果
构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景。这个例子我觉得既美观又代表性很强,所以拿出来给大家分享一下。
本例地址:http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html
例子动图:
上面场景中主要的知识点包括:3D 灯光以及 3D 模型的流动。
场景搭建
整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景:dm =
newht.DataModel(); g3d =
newht.graph3d.Graph3dView(dm); g3d.setGridVisible(
true);
//指定是否显示网格g3d.setGridColor(
'#74AADA');
//指定网格线颜色g3d.getView().className =
'main';
//设置类名document.body.(g3d.getView());
//将3d组件添加进body体中window.addEventListener(
'resize',
function(e){g3d.invalidate(); },
false); g2d =
newht.graph.GraphView(dm); g2d.setAutoScrollZone(-
1);
//设置自动滚动区域大小,当鼠标距离拓扑边缘小于这个值时,拓扑自动滚动(调整translateX或translateY)g2d.getView().className =
'g2d'; g2d.setEditable(
true);
//设置拓扑中的图元是否可编辑document.body.(g2d.getView()); ht.
Default.callLater(g2d.fitContent, g2d, [
true,
50,
true]);
//获取全局下一个id编号g3d.setHeadlightRange(
2000);
//灯影响范围,默认为0代表可照射到无穷远处,如果设置了值则光照射效果随物体远离光影而衰减
所有HT组件最根层都为一个 div 组件,可通过组件的 getView() 函数获得,这里就是利用这种方法将 3D 和 2D 组件添加进 body 体中的。只要 3D 和 2D 共用同一个数据容器,那么数据容器中的图元都是共用的,也就是说只要我们排布好 2D 或者 3D 中的图元,那么剩下的那个组件中图元的排布以及样式都是根据排布好的组件来排布的。
添加灯光
场景中出现的灯光,除了会旋转的灯光,还有就是两个静止的红灯和黄灯,当旋转的灯光照向其他地方的时候看得比较清楚:redLight =
newht.Light();
//灯类redLight.p3(
0,
0, -
175);
//实例变量的位置redLight.s({
'light.color':
'red',
//灯光颜色
'light.range':
400
//灯影响范围,默认为0代表可照射到无穷远处,如果设置了值则光照射效果随物体远离光影而衰减}); dm.add(redLight);
//将实例变量添加进数据容量中rotateLight =
newht.Light(); rotateLight.s({
'light.color':
'green',
'light.type':
'spot'
//默认为point点光灯,可设置为spot聚光灯,以及directional的方向光类型}); dm.add(rotateLight); yellowLight =
newht.Light(); yellowLight.p3(
0,
0,
60); yellowLight.s({
'light.color':
'yellow',
'light.range':
200}); dm.add(yellowLight);
场景中模型的构建
首先是地板的创建,地板是一个圆形的地板,通过设置样式 shape3d 为 cylinder,剩下的只要设置好大小、位置以及样式等等即可:
floor= new ht.Node();
//Node 节点类
floor.s3(
1100,
10,
1100);
floor.p3(
0, -
100, -
110);
floor.s({
'shape3d':
'cylinder',
//设置 3D 模型为圆形
'shape3d.side':
100,
//默认值为0,决定3d图形显示为几边型,为0时显示为平滑的曲面效果
'shape3d.color':
'white',
//默认值为#3498DB,3d图形整体颜色
'3d.selectable': false,
//默认值为true,控制图元在Graph3dView上是否可选中
'2d.visible': false
//默认值为true,控制图元在GraphView上是否可见}); dm.add(
floor);
接着添加地板外围的 8 根圆柱:
for( vari= 0; i< 8; i++){ varangle = Math.PI* 2*i/ 8; pillar = newht.Node(); pillar.s({ 'shape3d': 'cylinder', 'shape3d.color': 'white', 'shape': 'circle', //多边形类型图元,为空时显示为图片'shape.background': 'gray'//多边形类型图元背景}); pillar.s3( 50, 180, 50); pillar.p3( Math.cos(angle)* 480, 0, - 110+ Math.sin(angle)* 480); dm.add(pillar); }
还有就是这些“箭头”作为贴图的模型,各种各样的,这里我就只解析一个,比较靠前的“波动”部分,具体的多边形的描述请参考形状手册:
其中 image 的部分是通过 ht.Default.setImage 函数来创建的名为 arrow 的贴图。
shape3 = newht.Shape(); //多边形类dm.add(shape3); shape3.setTall( 60); //设置高度shape3.setThickness( 0); //设置厚度shape3.s({ //设置样式'shape.background': null, 'shape.border.width': 10, //多边形类型图元边框宽度'shape.border.color': 'blue', 'all.visible': false, //六面是否可见'front.visible': true, 'front.blend': 'blue', //前面染色颜色'front.reverse.flip': true, //前面的反面是否显示正面的内容'front.image': 'arrow', //前面贴图'front.uv.scale': [ 16, 3] //前面贴图的uv缩放,格式为[3,2]}); shape3.setPoints([ //设置点数组{x: 0, y: 0}, {x: 25, y: - 25}, {x: 50, y: 0}, {x: 75, y: 25}, {x: 100, y: 0}, {x: 125, y: - 25}, {x: 150, y: 0}, {x: 175, y: 25}, {x: 200, y: 0} ]); shape3.setSegments([ //描述点连接样式1, // moveTo3, // quadraticCurveTo3, // quadraticCurveTo3, // quadraticCurveTo3// quadraticCurveTo]); shape3.p3(- 100, 0, 100); shape3.setRotationZ(- Math.PI/ 2); //设置图元在3D拓扑中沿z轴的旋转角度(弧度制)
设置定时器使各个模型中的图片“流动”以及旋转灯光的旋转offset =
0;
angle=
0; setInterval(function(){
angle+= Math.PI/
50; rotateLight.p3(
400
*Math.
cos(
angle),
70, -
110+
400
*Math.
sin(
angle));
//设置旋转灯光的坐标offset +=
0.1; uvOffset = [offset,
0]; shape1.s({
'front.uv.offset': uvOffset
//前面贴图的uv缩放,格式为[3,2]}); shape2.s({
'front.uv.offset': uvOffset }); shape3.s({
'front.uv.offset': uvOffset }); shape4.s({
'front.uv.offset': uvOffset }); shape5.s({
'shape3d.uv.offset': uvOffset,
//决定3d图形整体贴图的uv缩放,格式为[3,2]
'shape3d.top.uv.offset': uvOffset,
//决定3d图形顶面贴图的uv缩放,格式为[3,2]
'shape3d.bottom.uv.offset': uvOffset
//决定3d图形底面贴图的uv缩放,格式为[3,2]});
cylinder.s({
'shape3d.uv.offset': uvOffset });
torus.s({
'shape3d.uv.offset': uvOffset }); },
200);
整个例子结束,感觉就是“小代码大效果”,代码量少而且简单,效果又非常不错,大家有兴趣可以去官网或者手册中查看其它的例子。返回搜狐,查看更多
责任编辑:
html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果相关推荐
- 基于 HTML5 WebGL 的 3D 场景中的灯光效果
2019独角兽企业重金招聘Python工程师标准>>> 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观 ...
- html 灯光效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
场景搭建 整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景: dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); ...
- html5泵站,基于 HTML5 WebGL 的污水处理厂泵站自控系统
前言 一道残阳铺水中,半江瑟瑟半江红.随着城市建设的迅速发展,每年都有大量新建管网水管通水运行.城市中有大量的排水设备,形成相应的城市排水系统,排水系统由检查井.排水泵站.污水处理厂.雨水口.排放口等 ...
- 自然语言理解属于计算机应用的那个范畴,基于自然语言理解的3D场景构造研究-计算机应用技术专业论文.docx...
汕头大学硕士学位论文基于 汕头大学硕士学位论文 基于自然语言理解的 3D 场景构造 I I 摘要 自然语言自动生成三维场景可以减少手工构建所耗费的人力物力,为了减少这些消 耗,国内外的很多学者对这方面 ...
- 线上分享会预告之深度学习在3D场景中的应用
大家好.上周我们迎来了第一期的线上分享,三维模型检索技术介绍,此次分享是一次接力形式的分享,每周都将有一位主讲人分享,希望更多的小伙伴加入我们一起分享,也是给自己一个机会锻炼.这里先预告一下,线上直播 ...
- 3D场景中选取场景中的物体。
杨航最近在学Unity3D 在一些经典的游戏中,需要玩家在一个3D场景中选取场景中的物体.例如<仙剑奇侠传>,选择要攻击的敌人时.为我方角色增加血量.为我方角色添加状态,通常我们使 ...
- 在3D场景中显示汉字
2019独角兽企业重金招聘Python工程师标准>>> TWaver 3D for Flex本身支持3D文字的显示,但是用户必须嵌入一套字库才可以.使用传统的方式,显示3D文字. [ ...
- 【Unity Shader】2D模型 3D模型混用的穿模问题(Spine在3D场景中出现前后穿模问题的解决办法)
问题描述: 在3D场景中使用Spine模型(2D), 因为Spine需要像Billboard类似的处理,永远是垂直与相机的, 所以一般情况下2D模型能正常显示且前后的阻挡关系也是没有问题的,如下图所示 ...
- [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果
大家好,我是秦元培.我参加了CSDN2014博客之星的评选,欢迎大家为我投票,同时希望在新的一年里大家能继续支持我的博客! 大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn. ...
最新文章
- 元宇宙大潮来袭?业内首个虚拟形象实时互动融合 SDK 来了!
- C++ 类和对象(三):构造函数补充、匿名对象、友元、内部类、类的static与const
- 区块链工作笔记0001---以太坊流程简介
- 筑龙网下载的文件格式是php_为什么使用迅雷下载的文件都是PHP格式的
- java key锁_Java细粒度锁实现的3种方式
- python logging 不输出控制台_Python中使用logging模块代替print(logging简明指南)
- mac 安装docker
- 昆仑通态触摸屏如何把参数由触摸屏传递到PLC_深圳PLC自动化培训哪家比较好
- python对excel数据分析常用功能(一文学会如何用Python实现excel基础功能)
- 安卓投屏大师_好用的投屏软件合集—2020年
- matlab二项式分布,C++ binomial_distribution二项式分布随机数用法解析
- The server cannot or will not process the request due to something that is perceived to be a client
- vue操作easyui中的DataGrid
- linux服务器关不了机,解决Linux关不了机开机,报错NMI watchdog: BUG: soft lockup - CPU#2 stuck for 22s的bug...
- Dubbo2.6.5入门——简单的HelloWorld
- 三维目标检测---PartA2论文解读
- 打通 Java 任督二脉 —— 并发数据结构的基石
- “无法启动Outlook,无法打开Outlook窗口”解决方法分享
- c++判断是否为闰年
- 官方教程 Redshift 04 渲染参数