JS 3D 模型

最近断断续续地写出了这么个东西:http://ucren.com/demos/d3d/index.html

这是一个简单的 JS 3D 模型,能跑在包括 IE6 的所有浏览器上,结合一下 tween 缓动算法,理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了。

介绍一下实现细节,矢量绘图仍然用的是 Raphael 库,Raphael 我在《如何用 JS 实现 3D ×××效果》这篇文章里有过介绍。此外,我参考了大量关于三维透视的文章,在下面的一些实现上用到了很多相关知识。

坐标系

我们通常用一根带原点和正方向箭头的直线来表示数轴,数轴就是一个一维坐标系,两条在原点处相交并互相垂直的数轴就形成了二维坐标系,也叫平面直角坐标系,它用两个参数 x,y 来表示平面上一个点的位置,在平面直角坐标系上,加入一条经过原点且垂直于该平面的数轴就形成了三维坐标系,它用三个参数 x,y,z 来表示空间中一个点的位置。三维坐标系分为左手坐标系右手坐标系两种,为了实现的方便,本例采用左手坐标系做为场景。

场景类 Sence

场景你可以理解为存放物体的一个有限大的空间,本例的场景可以添加任意多个不同的物体(比如长方体等),场景支持任意方向的旋转,对于旋转,本例场景的实现分为以下三种方式,他们分别是绕场景中任意一个参考点的 x 轴、y 轴和 z 轴旋转。场景发生旋转后的效果是遍历场景中每一个物体,使物体发生相对于参考点做相应的旋转。

渲染器类 Renderer

渲染器你可以理解成一部照相机,由一个位于场景中或场景外的某一个地点的人拍摄,输出的照片就是渲染器的产物。渲染器涉及到两个重要的参数:人的位置和照相机景深等。拍涉到的照片会直接输出到一个 <div> 容器上,电脑前的您就能看到物体了,如果在场景中的物体不断发生位置变化的同时,渲染器也在一直做拍照的工作,那么您将看到物体的动画过程,渲染器可以支持 vml/svg 或 canvas 等多种绘图适配器。

长方体类 Cuboid

为了实现长方体,本例中又加了三个重要的辅助类,他们是点类(Point)、线类(Line)和面类(Face),一个长方体由六个面确定,一个面由四条边线确定,一条边线由两个线头点确定。本例中,一个场景内的任意一个长方体都能单独进行旋转、位移等操作,在对体操作时,归根结底要落到组成体的每一个关键点的位置运算上。所以点是最重要的基础类,虽然它只能做位置变化的操作,但由它构成的每一个物体将会在点位置发生规则变化后产生很神奇的效果。

关于画家算法

渲染器工作时,会从他的角度上能看到的所有物体都描绘出来,即用 2D 的手法去描述 3D 的物体。这里涉及一个问题,离观察者越近的物体会挡住或部分挡住离得远的物体,同样的,在同一个物体上的多个面,离观察者越近的面会挡住或部分挡住离得远的面。本例采用画家算法来解决这个问题,“画家算法”表示头脑简单的画家首先绘制距离较远的场景,然后用绘制距离较近的场景覆盖较远的部分。画家算法里有多种实现,最常见的也最简单的是深度排序,本例用的也是深度排序,首先令每个面都具有中心点,再根据中心点的 z 轴坐标由大到小对面进行排序,排完序后的面即是离观察者由远及近的一个顺序,最后再逐个面进行渲染即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 能让你受益匪浅的10个css使用技巧

    在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器),当我们使用3D...

    winty
  • 3C的衍生技术简介

    染色质构象捕获技术的发明,使得科学家可以通过实验手段来研究染色质的空间结构。传统的3C技术通量较低,只适用于分析one_vs_one的染色质互作,为了更加高效的...

    生信修炼手册
  • TensorFlow2.0(2):数学运算

    可以看出,对于基本运算加(+)、减(-)、点乘(*)、除(/)、地板除法(//)、取余(%),都是对应元素进行运算。

    统计学家
  • 重磅!美国公布长达35页的《2016-2045年新兴科技趋势报告》

    前段时间美国公布的一份长达35页的《2016-2045年新兴科技趋势报告》。该报告是在美国过去五年内由政府机构、咨询机构、智囊团、科研机构等发表的32份科技趋势...

    钱塘数据
  • 解读 | 2019 年 10 篇计算机视觉精选论文(上)

    内容一览:2019 年转眼已经接近尾声,我们看到,这一年计算机视觉(CV)领域又诞生了大量出色的论文,提出了许多新颖的架构和方法,进一步提高了视觉系统的感知和生...

    AI算法与图像处理
  • 2019年末,10 位院士对 AI 的深度把脉(上)

    2019 年 12 月 20 日,由鹏城实验室、新一代人工智能产业技术创新战略联盟主办的为期两天的「新一代人工智能院士高峰论坛」在深圳开幕。

    AI科技评论
  • 腾讯原创作品区块链版权存证发布​

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 原创馆和腾讯区块链联合打造的“版权存证”功能已经上线啦,通过区块链技术为您的原...

    腾讯ISUX
  • 对不起,阿里投资的AI公司证明:刷脸支付防不住3D面具

    最新消息,针对3D人脸面具攻破刷脸支付,支付宝和微信均已给出回应:遭遇盗刷,全额赔付。

    量子位
  • 一只塑料兔竟有DNA,身体每处都能“克隆” 本兔| 爱因斯坦母校最新研究

    这项来自瑞士苏黎世联邦理工学院和以色列Erlich Lab的神奇研究,首次将DNA作为信息存储工具,注入到了日常物品当中。

    量子位
  • RSNA 2019:记录、风向与思考(学术篇)

    每年RSNA上,我们都能看见这一年最先进的产品和技术,看见曾经的不可能变为可能。今年的RSNA风向标指向哪里?医疗AI的局中人该何去何从?

    AI掘金志

扫码关注云+社区

领取腾讯云代金券