引入Three.js

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>

</body>

</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();

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

　　　　var scene = new THREE.Scene();

       var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);

       var renderer = new THREE.WebGLRenderer();

       renderer.setSize(window.innerWidth, window.innerHeight);

       document.body.appendChild(renderer.domElement);

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

点，线，面：

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

第一个例子，画一条线：

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

1.创建一个几何体

2.为几何体创建材质

3.创建网格

4.将网格添加到场景中

var geometry = new THREE.CubeGeometry(1,1,1);//几何体

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});//材质

var cube = new THREE.Mesh(geometry, material); //网格

scene.add(cube);

WebGL中点由Vector3方法创建

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

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

var geometry = new THREE.Geometry();//定义几何体

var material = new THREE.LineBasicMaterial( { vertexColors: true } );//定义材质

var color1 = new THREE.Color( 0x111111 ), color2 = new THREE.Color( 0x555555 );

var point1 = new THREE.Vector3( -50, 0, 50 );

var point2 = new THREE.Vector3(  0, 0, -100 );

geometry.vertices.push(point1);//来存放点

geometry.vertices.push(point2);

geometry.colors.push( color1, color2 );//设置顶点的颜色

var line = new THREE.Line( geometry, material, THREE.LinePieces );

scene.add(line);

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

    var camera,renderer,light;

    var scene = new THREE.Scene();

    function init() {

        width = document.getElementById('canvas-frame').clientWidth;

        height = document.getElementById('canvas-frame').clientHeight;

        renderer = new THREE.WebGLRenderer({

            antialias : true//抗锯齿，平滑

        });

        renderer.setSize(width, height);

        document.getElementById('canvas-frame').appendChild(renderer.domElement);

        renderer.setClearColorHex(0xFFFFFF, 1.0);

    }

    function initCamera() {

        camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);

        camera.position.x = 0;

        camera.position.y = 500;

        camera.position.z = 0;

        camera.up.x = 0;

        camera.up.y = 0;

        camera.up.z = 1;

        camera.lookAt({

            x : 0,

            y : 0,

            z : 0

        });

    }

    function initLight() {

        light = new THREE.DirectionalLight(0x110000, 1.0, 0);

        scene.add(light);

    }

    function initObject() {

        var geometry = new THREE.Geometry();

        var material = new THREE.LineBasicMaterial( { vertexColors: true } );

        var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

        var point1 = new THREE.Vector3( -50, 0, 50 );

        var point2 = new THREE.Vector3(  0, 0, -100 );

        geometry.vertices.push(point1);

        geometry.vertices.push(point2);

        geometry.colors.push( color1, color2 );

        var line = new THREE.Line( geometry, material, THREE.LinePieces );

        scene.add(line);

    }

    init();

    initCamera();

    initLight();

    initObject();

    renderer.clear();

    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. Akka in action （第一章 介绍Akka）

    在本章 概述Akka 了解Actors和Actor系统 Akka的适用范围 在第一章中,会介绍给你Akk的个方面,它能做什么,与现有的解决方案有那些不同.重点关注Akka有哪些功能和使用范围和强大的并 ...

  2. Docker-docker镜像

    前言 在 Docker 1.13+ 版本中推荐使用 docker image 来管理镜像. 查看安装的Docker版本信息: [dockuser@localhost Desktop]$ docker ...

  3. window连接linux共享

    前提说明:windows主机信息:192.168.1.100 帐号:abc 密码:123 共享文件夹:sharelinux主机信息:192.168.1.200 帐号:def 密码:456 共享文件夹: ...

  4. 重新想，重新看——CSS3变形，过渡与动画④

    最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...

  5. Linux系统CentOS使用yum方式安装指定版本的PHP 添加yum源 从PHP5.3升级到5.4/5.5/5.6

    默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 首先删除旧版本的PHP, 通过yum list installed | grep php可以查看所有已安装的php软件 使 ...

  6. Graph_Master(连通分量_E_Hungry+Tarjan)

    hdu_4685 终于来写了这题的解题报告,没有在昨天A出来有点遗憾,不得不说数组开大开小真的是阻碍人类进步的一大天坑. 题目大意:给出n个王子,m个公主,只要王子喜欢,公主就得嫁(这个王子当得好霸道 ...

  7. Hive中的数据倾斜

    Hive中的数据倾斜 hive 1. 什么是数据倾斜 mapreduce中,相同key的value都给一个reduce,如果个别key的数据过多,而其他key的较少,就会出现数据倾斜.通俗的说,就是我 ...

  8. CA证书，https讲解

    关于具体连接过程,https://blog.csdn.net/wangjun5159/article/details/51510594 这篇博客写的应该比较准确. 我的理解,其中关键的一点是 http ...

  9. 如何将本地的项目上传到git

    如何将本地的项目上传到git 1 进入项目文件夹,把目录变为git仓库 git init 2 把文件添加到版本库中 git add . 3 把版本提交到版本库 git commit -m 'first ...

  10. ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法

    如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){}  ②使用:$.方法(有参数的 ...