俗话说,有人的地方就有江湖,江湖就是帮派林立错综复杂的关系网.今天我们就来展示这样一个小小的江湖. 故事背景 崇祯末年,民不聊生,烽烟四起-- 江湖都是有背景的,我们的3D江湖也需要一个背景.江湖就是一个舞台,舞台就要有空间.场地.灯光和观众.在我们的3D舞台中,box就是空间,容纳所有物体:network就是场地,展示千姿百态:PointLight和AmbientLight就是灯光,让画面更立体鲜亮:Camera就是观众,没有观众戏就永远不会开场.下面就看看这个江湖是个怎样的背景: var b

这样一簇绚烂丰满艳丽多姿的3D小球花,要多少代码才能完成?其实不足百行,您信吗?下面咱就看一下具体实现过程,让您分分钟学会用TWaver HTML5制作3D拓扑图. 搭建3D空间 首先为花簇的绽放建一个展示的舞台.接触过TWaver2D的都知道,box.network是必不可少的,但对3D场景来说,还远远不够.一是要添加镜头位置,确定我们在什么角度和距离进行观察:二是要加上灯光,否则再美的画面也看不见.灯光分为点光源和环境光,一般来说要一个环境光和若干点光源搭配才能出来好的效果. var box

我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的数据储存,我们就可以实现一个简易版的 Web 聊天工具了,有空的朋友可以自己尝试下实现,那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了,请大家接着往下看. 有了前面的知识储备,我们就可以来真正实现我们 3D 拓扑图组件上节点位置信息的实时数据同步了,毋庸置疑,节点的位置信

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo.接下来我们就看看这个实时数据通讯是一个什么样的套路. 我们先来聊聊这次 Demo 的思路吧,首先我要有一个 3D 的拓扑图组件,在上面创建几个节点,然后通过拉力布局(ForceLayout)将这些节点自动布局,但是有一定,需要在不同的网页窗口下,对应节点的位置是一样的,简单地说就是不同网页窗口

我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配合上数据库的数据储存,我们就可以实现一个简易版的 Web 聊天工具了,有空的朋友可以自己尝试下实现,那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了,请大家接着往下看. 有了前面的知识储备,我们就可以来真正实现我们 3D 拓扑图组件上节点位置信息的实时数据同步了,毋庸置疑,节点的位置信

原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码.下面是效果图: 看了效果图是不是觉得它是一副麻将,对,第一眼我也认为是用CSS3写的麻将特效,结果我错了,它只是长得比较像而已. 另外,你也可以在这里直接查看菜单的DEMO演示. 接下来再分析一下实现这款3D菜单的源代码. 代码主要由HTML和CSS3组成,应该说还是比

现在,3D 模型已经用于各种不同的领域.在医疗行业使用它们制作器官的精确模型:电影行业将它们用于活动的人物.物体以及现实电影:视频游戏产业将它们作为计算机与视频游戏中的资源:在科学领域将它们作为化合物的精确模型:建筑业将它们用来展示提议的建筑物或者风景表现:工程界将它们用于设计新设备.交通工具.结构以及其它应用领域:在最近几十年,地球科学领域开始构建三维地质模型,而且 3D 模型经常做成动画,例如,在故事片电影以及计算机与视频游戏中大量地应用三维模型.它们可以在三维建模工具中使用或者单独使用.为

之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这个3D爱心动画的实现过程,可以一起来看看. 当然你也可以先看一下DEMO演示 这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码. HTML代码: <div class=’heart3d’> <div class=’rib1′&

3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQzMg==.html?spm=a2hzp.8244740.0.0 那么3D视频制作软件哪个好?推荐使用会声会影2018哦,因为用到了翻页的特效,所以需要用到G滤镜,还没有的小伙伴可以去贴吧寻找. 图1:简单3D翻页相册 一.素材准备 1.图片素材 婚纱照或者写真照片都可以,但是一定要高清,至少分辨率1

其实是依托Css3的功劳,先上一个例子 链接: https://pan.baidu.com/s/1cZ-mMI01FHO3u793ZhvF2w 提取码: d3s7代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transform (元素2D 3D转换) translate,3d,X,Y,Z (移动距离) scale,3d,X,Y,Z (缩放比例) rotate,3d,X,Y,Z (旋转角度) skew

各位老铁,我灰太狼又又又回来了,嘿嘿!!!!最近在忙所以有日子没写博客了,今天带大家看个好玩的东西 这个东西是今天偶尔看到的,是啥呢,难道是漂亮的小姐姐吗?当然是......不可能的了,这个东西其实就是简单易用的3D引擎库:ZDog,再深入一点应该说他是一个伪 3D 引擎,为何称之为伪3D引擎呢,是因为他的展示形式与众不同,按照官网的话说就是它的几何图形存在于 3D 空间中,但却以平面图形进行渲染. 我们先来看看具体的一些效果再继续介绍,毕竟没实现效果的介绍跟白嫖没啥区别 看到了吧,炫酷不,这些

先发个3D盒子最终效果图 在线效果预览:http://dtdxrk.github.io/game/css3-demo/box-3d.html 制作步骤1:创建基本结构 分布把6个面定义到3×3的画布上,1和4暂且是重叠的. html结构比较简单: <div class="box" id="box"> <div class="layer">1</div> <div class="layer&quo

本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画制作水平会有所帮助 CSS 3D 基础知识 本文默认读者掌握一定的 CSS 3D 知识,能够绘制初步的 3D 动画效果.当然这里会再简单过一下 CSS 3D 的基础知识. 使用 transform-style 启用 3D 模式 要利用 CSS3 实现 3D 的效果,最主要的就是借助 transfor

http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例如  http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 AP

http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例如  http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 AP

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连接QQ物联摄像头为用户提供2016年天体大事件的直播,大家可以通过手Q实时观看到世界各地最佳观测点的日食,流星等天体现象.承载整个“星球计划”活动的运营页面,经多方讨论,我们决定尝试3D全景漫游模式的H5运营页进行推广,今天就不详述活动的具体内容,先和大家聊一聊这H5里“3D全景漫游”的制作方法.

在3D的游戏中制作2D的效果是一个很常见的需求,我在很早前玩过一个叫做艾尔之光的游戏,里面就大量的使用了这个技术.就像下面图片中的伤害数字,这些数字往往还是有一些动画效果在里面的,比如大小的变化,颜色的变化等.在使用NGUI的时候这个东西做起来有点麻烦,因为2D对象在屏幕的位置需要根据游戏内3D对象的位置进行换算.但是在uGUI中,这个问题有了一个非常好的解决方案. 我先把做好的效果图放上来,原谅我不会做gif,其实图中的圆环是个2D的帧动画.它会跟着cube的移动而运动. 对于如何使用图片制作

[前言]自半年前笔者发表博客“什么是计算机图形学”以来,时常有人来向笔者询问3D模型的构建方法与工具.笔者的研究方向是以3D技术为主,具体包括3D建模,3D处理及3D打印三个方面,在3D建模与处理方面从事了十多年的研究,接触过很多3D相关的软件,在这方面有些经验.因此,特撰写此文,以帮助我们的学生及关注3D技术的人了解3D建模和3D技术.本文仅仅为笔者根据自己的经验对3D建模与处理软件浅薄的理解,不涉及对技术的深入讨论,是非学术性的.因此,笔者尽量尝试用通俗的语言介绍一下各种3D建模的软件和工具

以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行.案例排名不分先后,如需Demo,可直接申请试用.   1. 化学元素周期表 六种排列方式,炫酷动画效果,TWaver 3D轻松实现. 演示地址:http://demo.servasoft.com/chemical-table/ 2.DNA螺旋图 DNA3D模型,包含几千个球体(几十万个面),高性能渲染,搭配丰富色彩和光照效果,可用于医疗三维可视化. 演示地址:htt

合金装备V:幻痛 制作特辑 资料原文出自日版CGWORLD2015年10月号   在[合金装备4(Metal Gear Solid IV)]7年后,序章作品[合金装备5 :原爆点 (Metal Gear Solid V: Ground Zeroes)]1年半后,合金装备(MGS)系列的最新作[合金装备5 幻痛(METAL GEAR SOLID V: THE PHANTOM PAIN)]发售了.游戏上做最新的挑战,一直走在这个时代的游戏图形最前端的开发团队,在本作中是以什么为目标,为了这个目标加入