ThreeJs学习笔记【day2】

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>

昨天简单的尝试了一下threejs的引入，场景，相机，网格材质等等特性，今天继续进行threeJs的学习

测试webGL兼容性

function isWebGLAvailable() {

    try {

        const canvas = document.createElement( 'canvas' );
        return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );

    } catch ( e ) {

        return false;

    }

}
if (isWebGLAvailable()) { 
    // dosomething
} else { 
    const warning = '你的浏览器不支持webGL'; console..log(warning)
}

通过trycatch测试webGL是否可用

画线

假设你将要画一个圆或者画一条线，而不是一个线框模型，或者说不是一个Mesh（网格）。 第一步我们要做的，是设置好renderer（渲染器）、scene（场景）和 camera（相机）-（如果对这里所提到的东西，还不了解，请阅读本系列文章ThreeJs学习笔记【day1】。

老规矩，先准备场景，渲染器，相机

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

const scene = new THREE.Scene();

position: 相机位置，默认为（0，0，0） lookAt：相机焦点方向，默认为Z轴负半轴方向, 大白话就是相机看向哪一个点

这里相机的属性，先不做理解，后续会有详细的文档

接下来，就需要画线了，首先是需要选择材质，对于线条来说，我们能使用的材质只有LineBasicMaterial或者 LineDashedMaterial。

//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x5FC979 } );

定义好材质之后，我们需要一个带有一些顶点的geometry（几何体）。

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) ); //a
points.push( new THREE.Vector3( 0, 10, 0 ) ); // b
points.push( new THREE.Vector3( 10, 0, 0 ) ); // c

const geometry = new THREE.BufferGeometry().setFromPoints( points );

注： Vector3是一个数学库，指的是x,y,z三维向量

BufferGeometry

是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。

面片 指的是构成几何体的要素的面

顶点位置 字面意思，顶点的坐标

面片索引 保存的就是当前面顶点信息的集合

法向量 是空间解析几何的一个概念,垂直于平面的直线所表示的向量为该平面的法向量

UV坐标 是指所有的图象文件都是二维的一个平面。水平方向是U，垂直方向是V，通过这个平面的，二维的UV坐标系。我们可以定位图象上的任意一个象素

注意，线是画在每一对连续的顶点之间的，而不是在第一个顶点和最后一个顶点之间绘制线条（相当于代码里，a->b b->c）。

既然我们已经有了能够画两条线的点和一个材质，那我们现在就可以将他们组合在一起，形成一条线。

剩下的事情就是把它添加到场景中，并调用render（渲染）函数。

const line = new THREE.Line( geometry, material );
scene.add( line ); renderer.render( scene, camera );

页面会出现一个由两条绿线组成的、指向上的箭头。