【webGL入门2】点线面的绘制
用js绘制webGL的点:
THREE.Vector3 = function ( x, y, z ) { //用THREE声明的变量都是全局变量。
this.x = x || 0;
this.y = y || 0;
this.z = z || 0;
};
注意:“||”(或)运算符,就是当x=null或者undefine时,this.x的值应该取0。
定义个一点,通常使用:
var point1 = new THREE.Vector3();
point1.set(4,8,9); //每个点都是在三维空间里的一个坐标,我们可以看作一个从原点引出的向量vector。
需要强调的是,three.js用的是右手坐标系。所以运行一下2-1的例程就能发现我们的屏幕其实显示的是xz平面,纵向为z,上方为正,横向为x,左边为正。所以将右手逆时针旋转即可模拟。

我们可以从代码中:
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
再次复习,WebGl的重要组成部分。
【webGL入门2】点线面的绘制的更多相关文章
- [WebGL入门]十四,绘制多边形
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...
- [WebGL入门]十六,绘制多个模型
注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家 ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- WebGL入门教程(五)-webgl纹理
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...
- WebGL入门教程(四)-webgl颜色
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...
- WebGL入门教程(三)-webgl动画
前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...
- VB6 GDI+ 入门教程[4] 文字绘制
http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[4] 文字绘制 2009 年 6 月 18 日 7条评论 ...
- WebGL简易教程(三):绘制一个三角形(缓冲区对象)
目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...
- WebGL入门教程(一)-初识webgl
一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...
随机推荐
- Download a image 图片另存为
点击一个链接,下载图片: JS: 1.找到图片的URL,即src的值: 2.创建一个anchor,将URL赋值给anchor 的 href. 3.将anchor追加到body,并且添加click事件: ...
- 【redis源码阅读】redis对象
结构定义 在redis中,对象的数据结构定义如下: typedef struct redisObject { unsigned type:4; unsgined encoding:4; uns ...
- 什么是IPFS?(二)
IPFS的的"宏伟"目标是取代HTTP, 那么先来看看IPFS是如何工作的? IPFS为每一个文件分配一个独一无二的哈希值(文件指纹: 根据文件的内容进行创建), 即使是两个文件内 ...
- Java枚举类使用
用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...
- 前端Blob对二进制流数据的处理方式
var xhr = new XMLHttpRequest(); xhr.open("post", "/login/getCaptcher?t=" + Math. ...
- 目前微服务/REST的最佳技术栈
服务端 日期 编程语言 Web Framework DbAccess/ORM 数据库 2017-09-07 Node.js 8.4 Koa 2.3 sequelize 4.8 MySQL 2017-0 ...
- shell之九九乘法表
echo -n 不换行输出 $echo -n "123" $echo "456" 最终输出 123456 而不是 123 456 echo - ...
- Java中的序列化与反序列化
序列化定义 将对象转换为字节流保存起来,并在以后还原这个对象,这种机制叫做对象序列化. 将一个对象保存到永久存储设备上称为持久化. 一个对象要想能够实现序列化,必须实现java.io.Serializ ...
- linux系统无法正常启动,故障排查恢复
linux内核启动修复 首先看linux内核重要文件grub.conf # grub.conf generated by anaconda # # Note that you do not have ...
- java基础笔记(9)----集合之list集合
集合 对于集合的理解,集合是一个容器,用于存储和管理其它对象的对象 集合,首先了解所有集合的父接口----collection 特点:存储任意object元素 方法 boolean add(Objec ...