// 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的物品图像，呈现到渲染器上(浏览器)
// 画点
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)<用于链接点与点的>
// 右手坐标系
// 线条的深入理解
线条的特点： 一条线是由点，材质，颜色组成
// 渲染循环
**什么是游戏循环： ** 不断改变物体的颜色，不断回执新的场景的循环为游戏循环
// 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
环境光一般设置成白色或者灰色
