构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景。这个例子我觉得既美观又代表性很强,所以拿出来给大家分享一下。
本例地址:http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html
例子动图:
上面场景中主要的知识点包括:3D 灯光以及 3D 模型的流动。
- 场景搭建
整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景:dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); g3d.setGridVisible(true);//指定是否显示网格 g3d.setGridColor('#74AADA');//指定网格线颜色 g3d.getView().className = 'main';//设置类名 document.body.appendChild(g3d.getView());//将3d组件添加进body体中 window.addEventListener('resize', function(e) { g3d.invalidate(); }, false); g2d = new ht.graph.GraphView(dm); g2d.setAutoScrollZone(-1);//设置自动滚动区域大小,当鼠标距离拓扑边缘小于这个值时,拓扑自动滚动(调整translateX或translateY) g2d.getView().className = 'g2d'; g2d.setEditable(true);//设置拓扑中的图元是否可编辑 document.body.appendChild(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 = new ht.Light();//灯类 redLight.p3(0, 0, -175);//实例变量的位置 redLight.s({ 'light.color': 'red',//灯光颜色 'light.range': 400//灯影响范围,默认为0代表可照射到无穷远处,如果设置了值则光照射效果随物体远离光影而衰减 }); dm.add(redLight);//将实例变量添加进数据容量中 rotateLight = new ht.Light(); rotateLight.s({ 'light.color': 'green', 'light.type': 'spot'//默认为point点光灯,可设置为spot聚光灯,以及directional的方向光类型 }); dm.add(rotateLight); yellowLight = new ht.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(var i=0; i<8; i++){ var angle = Math.PI*2*i/8; pillar = new ht.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 = new ht.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, // moveTo 3, // quadraticCurveTo 3, // quadraticCurveTo 3, // quadraticCurveTo 3 // 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);
整个例子结束,感觉就是“小代码大效果”,代码量少而且简单,效果又非常不错,大家有兴趣可以去官网或者手册中查看其它的例子。
相关推荐
Three.js对WebGL的API进行了封装,极大地方便了Web开发人员创建3D场景、模型、动画、渲染效果以及交互式的3D应用。 Three.js的基础使用方法包括场景设置、相机设置、灯光设置、材质和几何体的定义以及渲染器的配置...
通过WebGL,开发者可以创建复杂的3D场景,包括灯光、纹理、几何形状和动画等,直接在用户的浏览器上运行。 在HTML5的这个项目中,霓虹灯闪烁特效可能涉及到以下关键知识点: 1. **Canvas元素**:HTML5中的Canvas是...
WebGL(Web Graphics Library)作为HTML5的一个重要组成部分,是基于OpenGL标准的JavaScript API,它允许开发者在浏览器环境中直接进行3D图形渲染,无需插件支持。这个"HTML5 WebGL实现超逼真的天气预报网页雷雨动效...
灯光在3D场景中至关重要,它们能够为模型添加深度和真实感,使得场景更加生动。在Three.js中,有多种类型的灯光供我们选择和配置,包括: 1. **点光源(PointLight)**:这种光源会向所有方向发射光线,就像一个发光...
此外,WebGL是HTML5中的一个关键技术,它提供了一个基于OpenGL标准的JavaScript API,用于在浏览器中进行硬件加速的3D图形渲染。WebGL使得开发者可以直接在浏览器上创建复杂的3D场景,而无需依赖插件。在3D实景地图...
"HTML5实现的3D空间灯光照射阴影动画效果源码"是一个基于HTML5的项目,旨在通过JavaScript和WebGL库来创建逼真的3D环境,其中包含了灯光、阴影以及动态动画效果。在这个项目中,开发者可能使用了Three.js或者 ...
在WebGL和Three.js的世界里,创建立体的文字效果可以极大地增强3D场景的视觉吸引力。Three.js是一个基于WebGL的JavaScript库,它简化了在浏览器中处理3D图形的过程。本教程将深入探讨如何在Three.js场景中创建具有...
它通过HTML5的canvas元素集成到网页中,允许开发者创建复杂的3D场景和应用。这个“效果超棒的Webgl模型-单层大户型”很可能是展示一套现代化家居设计的3D模型,用户可以在浏览器中进行互动浏览,仿佛置身于真实的...
在这个"html5基于three绘制3D天体木星动画特效.zip"压缩包中,我们可以看到一个利用HTML5、JavaScript和CSS3实现的3D木星动画效果。这个特效不仅展示了HTML5的潜力,还让我们了解了如何利用Three.js库在Web浏览器中...
它通过HTML5 Canvas元素与JavaScript结合,为网页提供了强大的图形处理能力,使得开发者可以在网页中实现复杂的3D场景和模型展示。 “效果超棒的Webgl模型-奥迪RS5”这个项目显然是一个使用WebGL技术来展示奥迪RS5...
首先,我们要理解HTML5中的Canvas元素,这是一个用于绘制2D图形的API,通过JavaScript可以动态地更新和修改画布上的内容。在这个项目中,Canvas作为three.js的画布,用于渲染3D模型。 然后,three.js库的核心在于它...
在本案例中,"HTML5+Three.js+WebGL实现的立方体矩阵起伏动画特效源码.zip"是一个结合了HTML5、Three.js库以及WebGL技术的项目,用于创建引人入胜的3D动画效果。下面我们将详细探讨这些技术及其在该场景中的应用。 ...
ShadowEditor编辑器是一款基于WebGL技术的3D模型编辑工具,它允许用户在浏览器环境中进行三维模型的创建、编辑和预览。WebGL是一种在网页上实现交互式2D和3D图形的标准,无需插件支持,兼容性良好,使得这款编辑器...
在“效果超棒的Webgl模型-单层小公寓2”这个项目中,我们可以推测这是一个使用WebGL技术构建的在线3D场景,展示了一间设计精美的单层小公寓。这个模型可能是由3D建模软件,如Blender、3ds Max或Maya等创建,然后经过...
这是一个3D场景,包含一架飞机在森林环境中飞行,并且有动画效果。这涉及到3D模型的创建(如飞机和树木),光照处理,纹理贴图以及运动路径的计算。此外,动画特效可能包括树木随风摇摆、飞机的移动轨迹、光影变化等...
4. 灯光与阴影:在3D场景中,灯光和阴影至关重要,可以显著提升真实感。WebGL支持多种类型的光源,如点光源、方向光和聚光灯。通过调整光源参数,可以模拟不同时间、不同环境下的光照效果,为小公寓模型添加逼真的...
Canvas是HTML5中的一个绘图区域,允许开发者通过JavaScript来绘制2D图形。在这个3D动态圣诞树中,开发人员可能使用了Canvas API来绘制每一帧的圣诞树图像,通过连续绘制实现动画效果。这包括旋转、缩放、移动等3D...
WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中呈现交互式的2D和3D图形,无需插件。它通过HTML5 Canvas元素与JavaScript进行接口,利用GPU加速,为网页提供了强大的3D图形渲染能力。"效果...
Minko3D是一个开源的2D和3D图形渲染引擎,基于Adobe Flash Player和HTML5的WebGL技术。它提供了一套完整的工具和API,用于创建交互式3D应用程序。在这个特定的例子中,我们将使用Minko3D来创建一个3D游戏场景,并在...