拥有未整理-等待研究标签的文章

three.js(八) bump map的生成 - 李勇2的个人空间 - 开源中国

bump Map 主要用于增加表面的法向量细节。例如一个平面其法向量处处相同,即使使用了纹理,光照下的表现仍然不够真实。这时可以扰动表面面片的方向量,从而形成比较真实的光照效果。类似于地形生成,可以通过分形的方法生成平面表面的随机高度, 接着根据高度生成每个位置的法向量。这里使用512\512的纹理, 但是由于分形需要513\513个点,所以最后纹理取计算结果的左上角即可。过程分成三步:...
阅读全文

three.js 地形纹理混合 - 李勇2的个人空间 - 开源中国

地形生成通常使用高度图, 而高度图的生成可以使用绘图工具,或者通过分形算法生成,例如squarediamond,  fbm方法。 这里采用简单求平均值+随机波动的方法。 对于一个2^n+1    2^n+1 的网格, 中心点的高度是四角点的平均值加随机偏移, 边上中点的高度值是边两端点的平均值加随机偏移。 接着将偏移的幅度缩小, 计算四个较小方块的顶点的高度值。...
阅读全文

VR进化论|教你搭建通用的WebVR工程 - YoneChen的个人空间 - 开源中国

_本文旨在介绍如何搭建WebVR工程以支持多场景开发。_首先,作为一个基本的前端工程来说,我们需要让代码“工程化”,不仅要提供编译构建、压缩打包功能,还要让每个页面模块化; 延伸到WebVR工程,我们也需要考虑“多页面”模块化,即提供多个场景模块化开发,因为一个完整的WebVR App不仅仅只有一个场景。这里可以参考google的WebVR多场景示例:_webvr多场景应用_多...
阅读全文

three.js 显示三维模型(贴图) - mellen的个人空间 - 开源中国

<!DOCTYPE html <html lang="en"    <head         <title id="h2"</title         <meta charset="utf8"         <meta name="viewport" content="width=devicewidth, userscalable=no, minimumscale=1.0...
阅读全文

Three.js WebGL 绘制流程(一) - 李勇2的个人空间 - 开源中国

Three.js 中3D 物体 都继承于 Object3D;而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。Gemotry 中 vertices 决定定点的 列表, face 决定面的构成, faceVertexUv 决定 纹理坐标而Material 不同类型将会采用不同类型的shader 来绘制, 通过 设定Material 的某些材质...
阅读全文

Three.js活地图 - 乐搏学院的个人空间 - 开源中国

的著名3D开源引擎之一的three.js中的主要对象及其间关系展示。图1:基本渲染顺序示意图图2:引擎核心对象示意图登录乐搏学院官网或关注我们的官方微博,还有更多惊喜哦本文出自 “原网址: 创建于: 20181013 16:37:16目录: default标签: 无
阅读全文

three.js三维空间中物体的位置信息变换 - 莫西摩西的个人空间 - 开源中国

第一点 object的矩阵是指:该物体从父级坐标系的原点变换到当前位置,其中包括位移、放缩、旋转第二点 物体的position:对象是相对其父级而言的例如: 场景中物体包含关系: scenegroupcube cube的position为(15,0,0)这是相对于group group的position为(80,0,0)这是相对于scene group的矩阵为 \_例子1、_ 现在要求...
阅读全文

Three.js 起步 - itviewer的个人空间 - 开源中国

three.js 四要素:渲染器、场景、相机、物体其中相机和物体需要添加进场景,渲染器通过场景和相机产生画面。物体又是由几何体和材质组成 其中渲染器为网页中的canvas元素,其可以在网页中显示指定,也可以通过指定div容器,然后再将渲染器生成的canvas元素添加进去。两种方式分别如下:1、指定cavas```<canvas id="mainCanvas" width="...
阅读全文

Three.js 实现3D模拟太阳系 - hn的个人页面 - 开源中国

     最近研究了一下Three.js发现功能很强大,把之前写过的太阳系改造成3D版本,效果还不错,废话少说,直接上图:        下面我来简单的介绍一下实现过程。太阳系包含太阳,8大行星及其它们各自的卫星,在此着重介绍下地月运动。  1\. 创建太阳(自发光)```function createSphere_sun(radius, segments,img){    r...
阅读全文

【腾讯Bugly干货分享】WebVR如此近-three.js的WebVR示例解析 - 腾讯Bugly的个人空间 - 开源中国

本文来自于 作者:苏晏烨关于WebVR最近VR的发展十分吸引人们的眼球,很多同学应该也心痒痒的想体验VR设备,然而现在的专业硬件价格还比较高,入手一个估计就要吃土了。但是,对于我们前端开发者来说,我们不仅可以简单地在手机上进行视觉上的VR体验,还可以立马上手进行Web端VR应用的开发!WebVR是一个实验性的Javascript API,允许HMD(headmounted d...
阅读全文