three.js学习笔记--基础知识

时间 2019-11-17

原文原文链接

基础知识

从去年开始就在计划中的three.js终于开始了javascript

历史介绍

（摘自ijunfan1994的转载，感谢做者）
OpenGL大概许多人都有所耳闻，它是最经常使用的跨平台图形库。
WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，经过这些API进行图形渲染将得以利用图形硬件从而得到较高性能。
而Three.js是经过对WebGL接口的封装与简化而造成的一个易用的图形库。
简单点的说法：WebGL能够当作是浏览器给咱们提供的接口，在javascript中能够直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮咱们封装得更好用一些。html

(WebGL)与(Three.js)对比

（摘自ijunfan1994的转载，感谢做者）
既然有了WebGL，咱们为何还须要Three.js？
这是由于WebGL门槛相对较高，须要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发彻底是两个不一样的方向，知识的重叠不多。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，可是还熟悉线性代数的应该寥寥无几了（好比求个逆转置矩阵试试？），更况且使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。
所以，前端工程师想要短期上手WebGL仍是挺有难度的。
因而，Three.js对WebGL提供的接口进行了很是好的封装，简化了不少细节，大大下降了学习成本。而且，几乎没有损失WebGL的灵活性。
所以，从Three.js入手是值得推荐的，这可让你在较短的学习后就能面对大部分需求场景。（Three.js的更新是至关频繁）前端

思路讲解

咱们要在屏幕上展现一个3D图形，大致的思路是这样的：java

构建一个场景，也就是一个三维空间
建立一个相机，也就是一个观察点，而且定义观察的位置和角度
定义物体和材质，把他们合起来以后放到场景中
使用指定的渲染器将总体渲染到屏幕上

概念具体讲解

Scene

场景是全部物体的容器，也对应着咱们建立的三维世界
Camera

Camera是三维世界中的观察者，用来描述空间的位置，three中相机有两种，分别是正交投影相机和透视投影相机，正交投影相机通俗的说就是看到的物体都是同样大，而透视投影相机看到的物体是近大远小，更符合咱们视觉的习惯
物体

three中供显示的物体有不少，他们所有都继承自Object3D类
Mesh

咱们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段链接获得的。线段不少时，看起来就是一条平滑的弧线了。计算机中的三维模型也是相似的，广泛的作法是用三角形组成的网格来描述，咱们把这种模型称之为Mesh模型。在Three中，Mesh的构造函数是这样的：Mesh( geometry, material )，geometry是它的形状，material是它的材质
Geometry

意思为形状，经过存储模型用到的点集和点间关系来达到描述物体形状的目的，three提供了立方体、平面、球体、圆形、圆柱、圆台等许多基本形状，你也能够经过本身定义每一个点的位置来构造形状，对于比较复杂的形状，咱们还能够经过外部的模型文件导入
Material

意思为材质，材质就是物体表面除了形状意外的全部可视属性的合集，例如色彩、纹理、光滑度、反射率、折射率、发光度。这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。
- 材质上面已经提到了，它包括了贴图以及其它。
- 贴图实际上是‘贴'和‘图'，它包括了图片和图片应当贴到什么位置。
- 纹理其实就是‘图'了。
  Three提供了多种材质可供选择，可以自由地选择漫反射/镜面反射等材质。
Points

points其实就是一堆点的集合，他在以前很长时间都被成为粒子系统，改名主要是由于粒子系统应该是包括粒子和相关的物理特性的处理的一套完总体系，而three中的Points则要简单的多，所以被命名为Points，Points的相关效果能够查看官网demo1 demo2 demo3
Light

光影效果是让画面丰富的重要元素，Three提供了包括环境光AmbientLight、点光源PointLight、聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。
只要在场景中添加须要的光源就行了。
Renderer

Renderer的做用就是将刚才全部的东西都渲染到屏幕上，Renderer绑定一个canvas对象，而且能够设置大小和默认北京颜色等，调用Renderer的render函数，传入scene和camera，就能够把图像渲染到canvas中了

最后以一个简单的demo结束

在fiddle中查看效果程序员

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="//wow.techbrood.com/libs/three.r73.js"></script>
        <script>
            //建立场景 
            var scene = new THREE.Scene();
            // 建立透视投影相机，PerspectiveCamera( fov, aspect, near, far )
            // fov：相机视锥体垂直视角，aspect：相机视锥体宽高比
            // near：相机视锥体近裁剪面距离，far：相机视锥体远裁剪面距离。
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            // 建立一个webGL渲染器
            var renderer = new THREE.WebGLRenderer();
            // 设置渲染器大小
            renderer.setSize( window.innerWidth, window.innerHeight );
            // 将渲染出来的canvas加入到body中
            document.body.appendChild( renderer.domElement );
            // 建立形状
            var geometry = new THREE.BoxGeometry( 1, 1, 1 );
            // 建立材质
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            // 合成图形
            var cube = new THREE.Mesh( geometry, material );
            // 添加到场景中
            scene.add( cube );
            // 设置相机位置
            camera.position.z = 5;
            // 渲染函数
            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>