WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结
实现三维场景载入操作的实现步骤: 主要知识点:着色器,纹理贴图,文件载入 实现思路: 获取canvas,初始化WEBGL上下文信息。 主要是实现WEBGL上下文的获取,设置视的大小,此时gl存储了WEBGL的上下文信息 初始化着色器 初始化...
[webGL学习]基于three.js构建WebGL实例讲解大纲
[webGL学习]基于three.js构建WebGL实例第一讲 [webGL学习]基于three.js构建WebGL实例第二讲 [webGL学习]基于three.js构建WebGL实例第三讲 [webGL学习]基于three.js构建WebGL实例第四讲 [webGL...
[webGL学习]基于three.js构建WebGL实例第四讲
今天我们继续我们的课程webGL 的学习,在该课程中我们将向大家展示如何给一个场景添加一个3D文字,如何设计出二维形状,把3D模型加载在OBJLoader现场。但这个过程是非常困难的.下面就具体来看一下. HTML代码 这部分还是跟之前的一样. <!DOCTYPE ht...
[webGL学习]基于three.js构建WebGL实例第一讲
我们主要做些的基本功能:创建一个场景,相机,渲染器,控制器(OrbitControls)。我们也将创建简单的定向光,加上一些对象(不同的几何形状)的阴影。为了使事情更快,我们决定采取一个最流行的WebGL框架——three.js。为什么使用three.js? 事实上,它是开源的Java...
《webgl入门指南》学习笔记三之three.js创建多重纹理
之前的demo看起来已经很真了,当然是在大家,一步一步step by step的情况下,被各种初始化的代码虐的体无完肤后的,才会有这么个感受。但是从一个对计算机图形无感的人来看,这当然是很粗糙的,比如看起来比较‘平’光线好像,对比不正常,所以我们现在要使用多重纹理,在这个新的demo里面我们使用了以...
《webgl入门指南》学习笔记一three.js与sim.js
最近又一次很久木有更新博客了,但是不是停了,而是一次性更新了太多,想清楚了自己水平有限,不想误导大家,所以就把这里单纯的当做自己的学习笔记。 上次让立方体转起来了,这次我们就直接介绍一个框架《webgl入门指南》的sim.js 这个东西是什么玩意呢,就是一个模拟器(官方说法),实际上就是简化了thr...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学中的纹理既包括通常意义上物体表面的纹理即使物体表面呈现凹凸不平的沟纹,同时也包括在物体的光滑表面上的...
WebGL three.js学习笔记 纹理贴图模拟太阳系运转
纹理贴图的应用以及实现一个太阳系的自转公转 点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理 纹理贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。 可以使用TextureL...
WebGL three.js学习笔记 自定义顶点建立几何体
自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的。 基本效果如图: 点击查看demo演示 demo演示:https://nsytsqdtn.github.io/demo/ver...
[webGL学习]基于three.js构建WebGL实例第五讲
今天,我们将继续学习webgl(three.js)这门课程,今天我们将向您展示如何以三种不同的方式为您的场景创建一个美丽的环境(天空立体景象):立方天空盒 侧面),球形天空盒(单周围纹理)和球形着色器天空盒(无纹理)。 我们会用到下面一些比较特殊的属性:反射,折射和类似soapbubb...
[webGL学习]基于three.js构建WebGL实例第二讲
我们来继续来学习 WebGL 的 three.js 库。 今天做些不一样的东西(如 MeshBasicMaterial,MeshLambertMaterial 和 MeshPhongMaterial),尽量使用各种参数(color,opacity,ambient,emissive,s...
[webGL学习]基于three.js构建WebGL实例第六讲
今天我们继续webGL的课程。 今天我们开始另一个主题,我们将使用sprites和纹理动画。 如果你不知道,sprites只是图像,可以附加到对象上。 这些sprites图像总是与我们的相机正交。 Three.js为sprites - THREE.SpriteMaterial提供了一个...
WEBGL学习笔记(四):three.js的结构
游戏已经做好,但是博客园不能支持哈,我在我的独立博客里面加入了这个游戏。 加载时候会黑屏,等待数秒即可,点击这里体验试玩:FlappyBird3d游戏试玩 我们知道three.js有几大件,掌握好这几个类,那么就算入门了! 场景scene,摄像机camera,渲染器ren...
学习 WebGL 的开源库 Three.js
孙广东 2017.3.4 http://blog.csdn.NET/u010019717 百度 第一个词条是: http://hewebgl.com/ 然后就照着学习呗 , 后面是需要花钱的! 开发环境搭建 VS Code(编辑器) + python(自带的文件服...
[webGL学习]基于three.js构建WebGL实例第三讲
大多程序员在刚开始理解3D(webGL)的知识时,通常对三维空间可能理解的比较困难,你也可能有困难理解不同的光线是如何工作的,或轴甚至如何位于空间。 今天,我会帮你处理这些问题。three.js所拥有一切必要的手段来为这个 - 帮手。在今天的例子中,我已经准备好为你工作的所有现有佣...
WEBGL学习笔记(七):实践练手1-飞行类小游戏之游戏控制
接上一节,游戏控制首先要解决的就是碰撞检测了 这里用到了学习笔记(三)射线检测的内容了 以鸟为射线原点,向前、上、下分别发射3个射线,射线的长度较短大概为10~30. 根据上一节场景的建设,我把y轴设为前进方向,z轴设为高度~ 如果射线返回有结果,那么说明鸟遇到了障碍物。代码如下: ...
WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 Web...
《webgl入门指南》学习笔记二之three.js创建mesh
三维开发渲染最多的对象大概是网格mesh了,Webgl开发三维也不例外。 网格就是一系列的多边形组成的,三角形或者四边形,网格一般由顶点来描绘,我们看见的三维开发的模型就是由一系列的点组成的。 现在我们就来使用mesh组建一个太阳系,这是chapter-3的内容,它里面主要将如何使用mesh,以及贴...
《webgl入门指南》学习笔记一three.js与sim.js
最近又一次很久木有更新博客了,但是不是停了,而是一次性更新了太多,想清楚了自己水平有限,不想误导大家,所以就把这里单纯的当做自己的学习笔记。 上次让立方体转起来了,这次我们就直接介绍一个框架《webgl入门指南》的sim.js 这个东西是什么玩意呢,就是一个模拟器(官方说法),实际上就是简化了thr...
学习 WebGL 的开源库 Three.js
孙广东 2017.3.4 http://blog.csdn.NET/u010019717 百度 第一个词条是: http://hewebgl.com/ 然后就照着学习呗 , 后面是需要花钱的! 开发环境搭建 VS Code(编辑器) + python(自带的文件服...