Three.js 基础

// three.js

// three.js 是基于WebGL， WebGL是基于右手坐标系进行渲染的;

// three.js是渲染到页面中需要三个组件：场景(scene)；相机(camera)；渲染器(renderer)

var scene = new THREE.Scene();  // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer();   // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);

// 场景, 相机，渲染器的关系

即：利用相机在场景中获取3d的物品图像，呈现到渲染器上(浏览器)

ss.png

// 画点

var point1 = new THREE.Vector3()
point1.set(4,8,9)

// 划线

function initObject() {
                // 几何体
                var geometry = new THREE.Geometry();
                // three.js中用于区分线条的材质 值拥挤和表示
                var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
                // 线的材质可以由2点的颜色决定
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                // 几何体中用于存放点
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );
                var line = new THREE.Line( geometry, material, THREE.LinePieces )
                scene.add(line);
            }

// var geometry = new THREE.Geometry() 几何体里面有一个vertices变量，可以用来存放点。

// 定义一种线条的材质：使用THREE.LineBasicMaterial类型来定义，它接受一个集合作为参数

[^LineBasicMaterial( parameters )]: Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：1. color： 线条的颜色用十六进制表示，默认是白色；2. Linewidth: 线条宽度，默认是一个单位； 3. Linecap: 线条两端的外观，默认是圆角端点 <当线条较粗时明显>； 4. Linejoin: 两条线条的连接处外观，默认是‘round’ 表示圆角；5. VertexColors： 定义线条材质是否适用顶点颜色，是一个Boolean值，是指线条的颜色会根据顶点颜色来进行插值； 6. Fog： 定义材质的颜色是否受全局雾效的影响

// 定义一条直线

[^var line = new THREE.Line( geometry, material, THREE.LinePieces )]: 第一个参数是几何体geometry，里面包含两个顶点和顶点的颜色。 第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。 第三个参数是一组点的链接方式。=> scene.add(line)<用于链接点与点的>

// 右手坐标系

CoordinateSystem.jpg

// 线条的深入理解

线条的特点： 一条线是由点，材质，颜色组成

// 渲染循环

**什么是游戏循环： ** 不断改变物体的颜色，不断回执新的场景的循环为游戏循环

// JS实现循环的需要的函数是 requestAnimationFrame

// 写法：

function animate() {
    render();
    requestAnimationFrame( animate );

}

// 性能监视器Stats的使用

var stats = new Stats();
stats.setMode(1); // 0: fps, 1: ms
// 将stats的界面对应左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
setInterval( function () {
    stats.begin();
    // 你的每一帧的代码
    stats.end();
}, 1000 / 60 );

// Stats原理：

1、 setMode(): 参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面

2、 stats的domElement：表示绘制的目的地（DOM），波形图就绘制在这上面。即渲染器的对应位置

3、 stats的begin函数: begin，在你要测试的代码前面调用begin函数，在你代码执行完后调用end()函数，这样就能够统计出这段代码执行的平均帧数了。

// 使用动画引擎Tween.js来创建动画

Tween.js的对象实例化

function initTween () {
    new TWEEN.Tween( mesh.position).to( { x: -400 }, 3000 ).repeat( Infinity ).start();
}

TWEEN.Tween_{的构造函数接受的是要改变属性的对象}这里传入的是mesh的位置。Tween的任何一个函数返回的都是自身，所以可以用串联的方式直接调用各个函数。

to函数： 接受两个参数，第一个参数参数是一个集合，里面存放的是键值对，x => 是指实例中的x属性 -400是指运动的重点位置；第二个参数是指完成动画的时间，这里是3000ms

repeat： 表示重复的次数，可以使固定的整数值；Infinity:无限

start： 表示开始动画，默认情况是匀速将mesh.position.x 位移到-400

// 动画循环函数TWEEN.update()

function animation() {
    renderer.render(scene, camera);
    // 浏览器自调用函数（载体）
    requestAnimationFrame(animation);
    // 性能测试器来调用stats.update()函数来统计时间和帧数
    stats.update();
    // Tween.js用将场景动起来
    TWEEN.update();
}

// 能够适配与光源的两种材质

MeshLamberMaterial （平面材质1）MeshPhongMaterial (材质2)

// 添加动画

requestAnimationFrame()

// 环境光： AmbientLight

环境光一般设置成白色或者灰色