用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】点线面的绘制的更多相关文章

  1. [WebGL入门]十四,绘制多边形

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:].另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家 ...

  2. [WebGL入门]十六,绘制多个模型

    注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家 ...

  3. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  4. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  5. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  6. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  7. VB6 GDI+ 入门教程[4] 文字绘制

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[4] 文字绘制 2009 年 6 月 18 日 7条评论 ...

  8. WebGL简易教程(三):绘制一个三角形(缓冲区对象)

    目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer( ...

  9. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

随机推荐

  1. lsof命令各个参数

    lsof `which httpd`  哪个进程在使用apache的可执行文件lsof /etc/passwd ------------ 哪个进程在占用/etc/passwdlsof /dev/hda ...

  2. iOS 提交审核报错 ERROR ITMS-90087解决办法

    ERROR ITMS-: "Unsupported Architectures. The executable for yht.temp_caseinsensitive_rename.app ...

  3. 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ---------------------------------------- 1.能添加热点: 2.能调用陀 ...

  4. Java测试(一)

    关于while和do-while循环,下列说法正确的是  A 两种循环除了格式不同外,功能完全相同  B 与do-while语句不通的是,while语句的循环至少执行一次  C do-while语句首 ...

  5. C语言第八次博客作业--字符数组

    一.PTA实验作业 题目1:查验身份证 1. 本题PTA提交列表 2. 设计思路 定义i,flag=1,z,m[11],a[19] 输入次数n for i=1 to n+1 gets(a) 加权求和在 ...

  6. 笔记:Spring Cloud Ribbon RestTemplate 详解

    详细介绍RestTemplate 针对几种不同请求类型和参数类型的服务调用实现,示例代码中的 restTemplate 都是通过Spring 注入方式创建的,相关代码如下: @Autowired pr ...

  7. 大数据 --> 一致性Hash算法

    一致性Hash算法 一致性Hash算法(Consistent Hash)

  8. RESTFUL风格 put 报错 HTTP Status 405 - JSPs only permit GET POST or HEAD

    出现下图这种情况时是controller所return的jsp视图找不到, 所以提示请求只允许GET.POST.HEAD. 解决方案 1.若返回视图,把表单中name为_method的input值改为 ...

  9. RDD概念、特性、缓存策略与容错

    一.RDD概念与特性 1. RDD的概念 RDD(Resilient Distributed Dataset),是指弹性分布式数据集.数据集:Spark中的编程是基于RDD的,将原始数据加载到内存变成 ...

  10. Alpha冲刺博客合集

    Alpha冲刺序列: Alpha冲刺Day1:Alpha No.1 Alpha冲刺Day2:Alpha No.2 Alpha冲刺Day3:Alpha No.3 Alpha冲刺Day4:Alpha No ...