引入Three.js

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7.     <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
  8. </body>
  9. </html>

三大要素：场景，相机和渲染器

场景：动画中的容器，所有物体都存在于一个场景当中，三维中的场景类似与二维动画中的canvas

相机：一个视角，对场景进行拍摄，通过切换位置和角度能拍摄到不同的景象

渲染器：将相机拍摄的内容渲染到浏览器中，最终用户是通过浏览器看到相机的景象的

他们之间的关系如图：

创建一个场景：var scene = new THREE.Scene();

创建一个相机：var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);

创建一个渲染器： var renderer = new THREE.WebGLRenderer();

相机具体参数我们后面会详细介绍

  1. 　　　　var scene = new THREE.Scene();
  2.        var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
  3.        var renderer = new THREE.WebGLRenderer();
  4.        renderer.setSize(window.innerWidth, window.innerHeight);
  5.        document.body.appendChild(renderer.domElement);

右手坐标系：WebGL采用右手坐标系，在二维坐标的基础上新增了Z轴，方向为从屏幕内到屏幕外垂直方向，如果左边为左手坐标系，右边是右手坐标系，WebGL采用的是右边图

点，线，面：

在三维世界中，三维坐标中的一个点确定一个位置，两点连接组成一条线，而多个点就形成一个平面或者多面形状，这种网格模型称为Mesh模型，

第一个例子，画一条线：

WebGL中创建一个物体需要3步：

1.创建一个几何体

2.为几何体创建材质

3.创建网格

4.将网格添加到场景中

  1. var geometry = new THREE.CubeGeometry(1,1,1);//几何体
  2. var material = new THREE.MeshBasicMaterial({color: 0x00ff00});//材质
  3. var cube = new THREE.Mesh(geometry, material); //网格
  4. scene.add(cube);

WebGL中点由Vector3方法创建

Vector3(x,y,z);//参数分别为x，y和z轴坐标

创建直线由几何体geometry的vertices来存放点，colors来存放顶点的颜色

  1. var geometry = new THREE.Geometry();//定义几何体
  2. var material = new THREE.LineBasicMaterial( { vertexColors: true } );//定义材质
  3. var color1 = new THREE.Color( 0x111111 ), color2 = new THREE.Color( 0x555555 );
  4.  
  5. var point1 = new THREE.Vector3( -50, 0, 50 );
  6. var point2 = new THREE.Vector3(  0, 0, -100 );
  7. geometry.vertices.push(point1);//来存放点
  8. geometry.vertices.push(point2);
  9. geometry.colors.push( color1, color2 );//设置顶点的颜色
  10.  
  11. var line = new THREE.Line( geometry, material, THREE.LinePieces );
  12. scene.add(line);

最后加上上面的创建场景，场景摄像机，光线等等，最终例子如下

  1.     var camera,renderer,light;
  2.     var scene = new THREE.Scene();
  3.  
  4.     function init() {
  5.         width = document.getElementById('canvas-frame').clientWidth;
  6.         height = document.getElementById('canvas-frame').clientHeight;
  7.         renderer = new THREE.WebGLRenderer({
  8.             antialias : true//抗锯齿，平滑
  9.         });
  10.         renderer.setSize(width, height);
  11.         document.getElementById('canvas-frame').appendChild(renderer.domElement);
  12.         renderer.setClearColorHex(0xFFFFFF, 1.0);
  13.     }
  14.  
  15.     function initCamera() {
  16.         camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
  17.         camera.position.x = 0;
  18.         camera.position.y = 500;
  19.         camera.position.z = 0;
  20.         camera.up.x = 0;
  21.         camera.up.y = 0;
  22.         camera.up.z = 1;
  23.         camera.lookAt({
  24.             x : 0,
  25.             y : 0,
  26.             z : 0
  27.         });
  28.     }
  29.  
  30.     function initLight() {
  31.         light = new THREE.DirectionalLight(0x110000, 1.0, 0);
  32.         scene.add(light);
  33.     }
  34.  
  35.     function initObject() {
  36.  
  37.         var geometry = new THREE.Geometry();
  38.         var material = new THREE.LineBasicMaterial( { vertexColors: true } );
  39.         var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
  40.  
  41.         var point1 = new THREE.Vector3( -50, 0, 50 );
  42.         var point2 = new THREE.Vector3(  0, 0, -100 );
  43.         geometry.vertices.push(point1);
  44.         geometry.vertices.push(point2);
  45.         geometry.colors.push( color1, color2 );
  46.  
  47.         var line = new THREE.Line( geometry, material, THREE.LinePieces );
  48.         scene.add(line);
  49.     }
  50.  
  51.     init();
  52.     initCamera();
  53.     initLight();
  54.     initObject();
  55.     renderer.clear();
  56.     renderer.render(scene, camera);

【WebGL】2.基础概念的更多相关文章

  1. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  2. TCP/IP基础概念及通信过程举例

    TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...

  3. Jmeter基础之---jmeter基础概念

    Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...

  4. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  5. 理解 angular2 基础概念和结构 ----angular2系列（二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  6. JavaBean 基础概念、使用实例及代码分析

    JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...

  7. RabbitMQ基础概念详细介绍

    http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ...

  8. linux设备驱动归纳总结（二）：模块的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...

  9. linux设备驱动归纳总结（一）内核的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59413.html linux设备驱动归纳总结(一):内核的相关基础概念 xxxxxxxxxxxxxx ...

  10. 什么是JavaScript闭包终极全解之一——基础概念

    本文转自:http://www.cnblogs.com/richaaaard/p/4755021.html 什么是JavaScript闭包终极全解之一——基础概念 “闭包是JavaScript的一大谜 ...

随机推荐

  1. 关于文件中的0D、0A

    文件一般分为文本文件和二进制文件. 在windows文本文件中,分行即‘\n“,表示为0x0D 0x0A.分为两种情况: 如果你想一个文本文件中写入一个'\n',文本文件中会增加0x0D 0x0A两个 ...

  2. 关于Android RenderScript 的详细说明和一些实用文档

    http://www.cnblogs.com/TerryBlog/archive/2012/03/02/2377251.html RenderScript 是一种低级的高性能编程语言,用于3D渲染和处 ...

  3. Vue数据绑定失效

    首先,我们得明白Vue数据响应的原理: 以对象为例:当把一个JavaScript对象传给Vue实例的data选项时,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些 ...

  4. 20135320赵瀚青LINUX内核分析第一周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.概述 第一周的学习内容主 ...

  5. linux-android（任务处理）

    1.开辟任务内存 2.设置每个任务优先级 ,,

  6. git基础常用维护命令

    开发模式介绍 master为生产环境分支 trunk为测试环境分支 开发分支由程序员自己取名 比如来一个新项目之后,下面步骤都是在本地操作 1.从本地获取远程master最新代码,保证本地master ...

  7. springboot2.1.3集成webservice及错误No operation was found with the name {...}解决办法

    1.项目使用springboot 2.1.3版本,集成webservice使用的依赖如下 <parent> <groupId>org.springframework.boot& ...

  8. MySQL中表复制:create table like 与 create table as select

    1    CREATE TABLE A LIKE B此种方式在将表B复制到A时候会将表B完整的字段结构和索引复制到表A中来. 2.    CREATE TABLE A AS SELECT * FROM ...

  9. 【Network Architecture】Densely Connected Convolutional Networks 论文解析

    目录 0. Paper link 1. Overview 2. DenseNet Architecture 2.1 Analogy to ResNet 2.2 Composite function 2 ...

  10. HDU1698 just a Hook - 带有lazy标记的线段树

    2017-08-30 16:44:33 writer:pprp 上午刚刚复习了一下不带有lazy标记的线段树, 下午开始学带有lazy标记的线段树 这个是我看大佬代码敲的,但是出了很多问题, 这提醒我 ...