什么是WebGL

　  WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML5 <canvas> 元素中使用（简介引自 MDN）。

　　以我的理解，WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

什么是Three.js

　  Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。

　　Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码，并且有很多人贡献代码，帮助 Mr.doob 一起维护这个框架。

WebGL与Three.js的关系

　　WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，对 WebGL 进行封装，简化我们创建三维动画场景的过程。只要你有一定的 JavaScript 基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。

　　用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

功能概述

Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js 的具体功能如下：

　　1. Three.js 掩盖了 3D 渲染的细节：Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）。

　　2. 面向对象：开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数。

　　3. 功能非常丰富：Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。

　   4. 速度很快：Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能。

　　5. 支持交互：WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。

　　6. 包含数学库：Three.js 拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。

　　7. 内置文件格式支持：你可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式。

　　8. 扩展性很强：为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可。

　　9. 支持HTML5 Canvas：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。

虽然 Three.js 的优势很大，但是它也有它的不足之处：

　　1. 官网文档非常粗糙，对于新手极度不友好。

　　2. 国内的相关资源匮乏。

　　3. Three.js 所有的资料都是以英文格式存在，对国内的朋友来说又提高了门槛。

　　4. Three.js 不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。

Three.js提供了几种源码获取方式，我是用的BootCDN 提供的免费 CDN 加速服务（同时支持 HTTP 和 HTTPS 协议），直接引入方式为：

<script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>

如果需要更新代码，可以点击这里查找最新版本地址引入即可。

入门程序：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<!--    引入three.js-->

    <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>

<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>-->

    <title>a</title>

    <style>

        /* 将margin设为0,overflow设为hidden，全屏显示 */

        body {

            margin: 0;

            overflow: hidden;  /* 超出部分隐藏 */

        }

    </style>

</head>

<body>

<div id="webgl-output"></div>

<script type="text/javascript">

    // 一旦所有东西都被加载，我们运行我们的Three.js东西

    function init() {

        // 创建一个场景，其中包含所有元素，如对象、相机和灯光

        var scene = new THREE.Scene();

        // 创建一个摄像头，它定义了我们看的地方

        // PerspectiveCamera(透视摄像机)、第一个属性是视野角度(FOV)、第二个值是长宽比(aspect ratio)、接下来的两个值是远剪切面和近剪切面

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

        // 创建一个渲染器(负责计算指定相机角度下浏览器中scene的样子)和设置大小

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));  // 将renderer对象的背景色设置为0xEEEEEE

        renderer.setSize(window.innerWidth, window.innerHeight);  // 让renderer对象将scene渲染成多大的尺寸

        renderer.shadowMapEnabled = true;  // 告诉渲染器需要阴影⭐️

        // 在屏幕中显示轴

        // var axes = new THREE.AxisHelper(20);  // axes坐标轴对象

        // scene.add(axes);  // 把坐标轴添加到场景中去

        // 创建接地面

        var planeGeometry = new THREE.PlaneGeometry(60, 20);  // PlaneGeometry: 平面几何 (参数: 宽60, 高20)

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});  // // MeshLambertMaterial:网格材质 (用来设置平面的外观, 颜色，透明度等)

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);  // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中

        // 旋转并定位平面

        plane.receiveShadow = true;  // 平面接收阴影⭐️

        plane.rotation.x = -0.5 * Math.PI;  // 绕X轴旋转90度

        plane.position.x = 15;  // 平面坐标位置

        plane.position.y = 0;

        plane.position.z = 0;

        scene.add(plane);  // 把平面添加到场景

        // 创建一个立方体

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);  // 立方体几何

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});  // 立方体材质(颜色、wireframe: true线框)

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);  // 立方体和外观合并

        cube.castShadow = true;  // 立方体阴影⭐️

        cube.position.x = -4;  // 立方体的坐标位置

        cube.position.y = 3;

        cube.position.z = 0;

        scene.add(cube);  //把立方体添加到场景

        // 创建一个球体

        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);  // 球体

        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});  // 球体的外观(颜色、wireframe: true线框)

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);  // 球体与外观合并

        sphere.castShadow = true;  // 球体的阴影

        sphere.position.x = 20;  // 球体的位置

        sphere.position.y = 4;

        sphere.position.z = 2;

        scene.add(sphere);  // 把圆添加到场景

        // 将摄像机定位并指向场景中心

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);  // lookAt函数指向场景的位置

        // 添加一个光源⭐️

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;    // 让光源产生阴影

        scene.add(spotLight);

        // 将渲染器的输出添加到html元素中

        document.getElementById('webgl-output').appendChild(renderer.domElement);

        // 渲染的场景

        renderer.render(scene, camera)

    }

    window.onload = init;

</script>

</body>

</html>

结果：

Three.js入门详解的更多相关文章

  1. three.js 入门详解(一)

    1. 概述 1.1 什么是WebGL? WebGL是在浏览器中实现三维效果的一套规范 想要使用WebGL原生的API来写3D效果的话,很吃力.three.js是WebGL的一个开源框架,它省去了很多麻 ...

  2. SQL注入攻防入门详解

    =============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...

  3. SQL注入攻防入门详解（2）

    SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...

  4. [转]SQL注入攻防入门详解

    原文地址:http://www.cnblogs.com/heyuquan/archive/2012/10/31/2748577.html =============安全性篇目录============ ...

  5. js对象详解(JavaScript对象深度剖析，深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  6. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  7. 【转载】SQL注入攻防入门详解

    滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园  首页  博问  闪存    联系  订阅 管理 随笔-58 评论-2028 文章-5  trackbacks-0 站长 ...

  8. vue2.x版本中computed和watch的使用入门详解-关联和区别

    前面两篇介绍了computed和watch的基本使用 watch篇 computed篇 两者的区别,继续通过代码实现的方式具体去了解 html <li>最开始的value值:{{ name ...

  9. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

随机推荐

  1. RF之条件判断、初始化清除-4

    条件判断:        rf中用run keyword if 关键字做条件判断,以此来达到类似在python中if ...else...条件判断的功能. 注意:ELSE IF一定都是大写的,不然运行 ...

  2. 同时使用Redis缓存和Google Guava本地缓存注意事项（深拷贝和浅拷贝）

    目录 1.问题场景及说明 2.Redis 缓存是深拷贝 3.Guava本地缓存直接获取则是浅拷贝 4.如何实现Guava获取本地缓存是深拷贝? 1.问题场景及说明 系统中同时使用 Redis 缓存和 ...

  3. C++ 枚举定义

    我们在平常的编程中,时常需要为一些属性定义一组可以选择的值,比如文件打开的状态可能会有三种:输入 输出和追加 我们一般情况下记录这些状态是让每一个状态和一个常数相对应   比如 ; ; ; 这个方法虽 ...

  4. Ajax基本概念

    一. Ajax 1. 什么是ajax Ajax: asynchronous  javascript  and  xml (异步js和xml) 其是可以与服务器进行(异步/同步)交互的技术一. ajax ...

  5. spark源码阅读 RDDs

    RDDs弹性分布式数据集 spark就是实现了RDDs编程模型的集群计算平台.有很多RDDs的介绍,这里就不仔细说了,这儿主要看源码. abstract class RDD[T: ClassTag]( ...

  6. 洛谷 题解 P2540 【斗地主增强版】

    [分析] 暴力搜顺子,贪心出散牌 为什么顺子要暴力? 玩过斗地主的都知道,并不是出越长的顺子越好,如果你有一组手牌,3,4,5,6,7,6,7,8,9,10,你一下把最长的出了去,你会单两张牌,不如出 ...

  7. Zero-shot Learning / One-shot Learning / Few-shot Learning

    Zero-shot Learning / One-shot Learning / Few-shot Learning Learning类型:Zero-shot Learning.One-shot Le ...

  8. Linux查询命令帮助信息（知道）

    方法一 command --help 方法二 man command 操作涉及到的按键: 空格键:显示手册的下一屏 Enter键:一次滚动手册的一行 b:回滚一屏 f:前滚一屏 q:退出 结果基本上全 ...

  9. 【LEETCODE】34、119题，Pascal's Triangle II

    package y2019.Algorithm.array; import java.util.ArrayList; import java.util.List; /** * @ProjectName ...

  10. Spring常用jar包功能详解

    很多小伙伴包括我自己,在使用spring的时候导入了一堆jar包,但是并不明白每个jar的用途,使用spring的不同功能时也不知该导入哪个jar包,今天记录一下spring各个jar包的含义,供大家 ...