《webgl入门指南》学习笔记三之three.js创建多重纹理
之前的demo看起来已经很真了，当然是在大家，一步一步stepbystep的情况下，被各种初始化的代码虐的体无完肤后的，才会有这么个感受。但是从一个对计算机图形无感的人来看，这当然是很粗糙的，比如看起来比较‘平’光线好像，对比不正常，所以我们现在要使用多重纹理，在这个新的demo里面我们使用了以下三...
《webgl入门指南》学习笔记二之three.js创建mesh
三维开发渲染最多的对象大概是网格mesh了，Webgl开发三维也不例外。网格就是一系列的多边形组成的，三角形或者四边形，网格一般由顶点来描绘，我们看见的三维开发的模型就是由一系列的点组成的。现在我们就来使用mesh组建一个太阳系，这是chapter-3的内容，它里面主要将如何使用mesh，以及贴图组...
three.js入门（7）几何体
二维几何体1.平面（PlaneGeometry）查看示例PlaneGeometry可以创建非常简单的一个二维矩行，其构造函数为：THREE.PlaneGeometry(width,height,widthSegments,heightSegments)参数必须描述width是该参数指定矩形的宽度he...
[译] THREE.JS入门教程-5.THREE.JS 你应当知道的十件事
译序Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。国外网站 aerotwist.com 有六篇较为简单的入门教...
three.js入门（7）几何体
二维几何体1.平面（PlaneGeometry）查看示例PlaneGeometry可以创建非常简单的一个二维矩行，其构造函数为：THREE.PlaneGeometry(width,height,widthSegments,heightSegments)参数必须描述width是该参数指定矩形的宽度he...
系列博文-Three.js入门指南(张雯莉)-照相机
照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。2.2正交投影vs透视投影举个简单的例子来说明正交投影与透视投影照相机的区...
three.js入门（5）照相机
什么是照相机？我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与...
three.js入门系列之光和阴影
初中物理教过我们镜面反射和漫反射，这是由于物体的材质直接导致的。在three.js中，由于物体的材料不同，对于光源的反应也是不一样的，下面就让我们一探究竟。一、材料据Three.js中描述，有两种材料能对光源有所反应：就是图中箭头标识的两种材料。二、检验编辑前例，设置光源位置：如图所示，我们在（1,...
Three.js入门篇（一）创建一个场景
上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍，一方面是为了加深自己的理解。另一方面希望能够帮助到有需要的人。一、在学习WEBGL的时候，你应该先了解要创建一个WebGL程序需要哪些步骤。就跟弄梅菜扣肉一样，需要哪些步骤。初始化WebGL绘图上下文初始化着色器程序建立模型和数...
《Three.js入门指南》学习笔记--第1~3章
概述一.配置环境：在three.js下载。其中three.js没有经过代码压缩，适合调试，three.js经过了代码压缩，文件较小，适合发布最终版的时候使用。在使用three.js之前，需要在html中引用：<scripttype="text/javascript"src="three.js"...
webGL之three.js入门3
这几天在看*程翻译的[美]Jos Dirksen的《Three.js开发指南》，看到第八章了，现在来总结一下threejs中材料的相关知识。顺带也看完了上海交大的张雯莉出的《threejs入门指南》，我所学所写都是基于书和threejs官网的一些例子。这两本书的电子版：链接:http://pan....
Three.js入门篇（一）创建一个场景
上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍，一方面是为了加深自己的理解。另一方面希望能够帮助到有需要的人。一、在学习WEBGL的时候，你应该先了解要创建一个WebGL程序需要哪些步骤。就跟弄梅菜扣肉一样，需要哪些步骤。初始化WebGL绘图上下文初始化着色器程序建立模型和数...
three.js入门（6）光源
一环境光AmbientLight影响整个场景的光源二点光源PointLight照射所有方向的光源三聚光灯光源SpotLight具有锥形效果的光源四平行光DirectinalLight类似太阳光线的光源五半球光光源HemisphereLight更贴近自然一、环境光（AmbientLight）—影响整个...
three.js入门系列之光源
首先创建场景来试验各种光源带来的不同效果：一、锥形光源（聚光灯）SpotLight接下来缩小范围（π/7）：二、基础光源（环境光）AmbientLight上例中没有添加环境光，使得周围黑漆漆的，下面就添加环境光：效果：三、点光源（照射所有方向）PointLight为了更加明确地展示此光源的效果，特地...
系列博文-Three.js入门指南(张雯莉)-照相机
照相机就是这样一个抽象，它定义了三维空间到二维屏幕的投影方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。2.2正交投影vs透视投影举个简单的例子来说明正交投影与透视投影照相机的区...
【带着canvas去流浪（11）】Three.js入门学习笔记
目录一.资料推荐及建议二.Three.js中的基本概念三.重点笔记四.补充示例示例代码托管在：http://www.github.com/dashnowords/blogs博客园地址：《大史住在大前端》原创博文目录华为云社区地址：【你要的前端打怪升级指南】一.资料推荐及建议1.官方文档很详细，但是A...
[译] THREE.JS入门教程-1.开始使用THREE.JS
译序Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。国外网站aerotwist.com 有六篇较为简单的入门教程...
three.js入门基本知识，教你十分钟做出一个旋转的图形
three.js入门基本知识，教你十分钟做出一个旋转的图形。three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。Three.js的六个基本步骤1.设置three.js渲染器（定义全局变量varrenderer）2...
《webgl入门指南》学习笔记一three.js与sim.js
最近又一次很久木有更新博客了，但是不是停了，而是一次性更新了太多，想清楚了自己水平有限，不想误导大家，所以就把这里单纯的当做自己的学习笔记。上次让立方体转起来了，这次我们就直接介绍一个框架《webgl入门指南》的sim.js这个东西是什么玩意呢，就是一个模拟器（官方说法），实际上就是简化了three...
webGL之three.js入门1
开场白最近开始学前端，看了极客学院的前端教学视频，其实有C++或者java基础的人学前端还是很快的。但是html的标签和CSS的样式还是得多code才能熟练，熟能生巧，学以致用。还在看js，因为有Java的基础，所以直接跳到了DOM，正好这几天要加入一个webGL的项目，就开始学习three.js了...