环境光

环境光是经过多次反射而来的光称为环境光，无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此，当你仅为场景指定环境光时，所有的物体无论法向量如何，都将表现为同样的明暗程度。（这是因为，反射光可以从各个方向进入您的眼睛）
环境光的位置是没有意义的。

THREE.AmbientLight = function ( color )

在场景中添加环境光，看看几何体的显示效果

var param;
var light;
var lightPos
function initLight() {
    var ParamObj = function () {
        this.x = 0;
        this.y = 0;
        this.z = 0;
    }
    param = new ParamObj();
    var gui = new dat.GUI();
    gui.add(param, "x", -10000, 10000).name('环境光X的位置')
    gui.add(param, "y", -10000, 10000).name('环境光Y的位置')
    gui.add(param, "z", -10000, 10000).name('环境光Z的位置')
		// 环境光定义为红色
    light = new THREE.AmbientLight(0xFF0000);
    light.position.set(param.x, param.y, param.z);
    scene.add(light);

}

我们在场景中添加了环境光，并且添加了gui控制环境光的xyz数值。
无论我们如何改变环境光的位置，几何体颜色都是不变的

环境光.gif

绿色玻璃看到红色物体是什么颜色？

为什么我透过绿色的被子看红色的物体是黑色？
首先先分析下我们上面红色几何体的照射情况，我们几何体的材质是红色的，灯光颜色是红色的，根据材质反射颜色，我们看到的是红色的，那我们把灯光改成黑色的，会是什么颜色呢？

// 环境光定义为黑色
light = new THREE.AmbientLight(0x000000);

黑色的环境光(无光)，照射到红色的几何体上，几何体无法反射任何光到我们人眼的，所以几何体变成了黑色。
那我改成绿色的环境光，照射到红色的几何体上，是什么颜色呢？

// 环境光定义为绿色
light = new THREE.AmbientLight(0x00ff00);

答案：也是黑色
绿色玻璃之所以显出绿色，是因为吸收了除绿色外的其他色光;而红色物体之，所以是红色，是因为反射红光而吸收其他颜色的色光。红色物体反射的红色光，经过绿色玻璃后，被滤去。所以，透过绿色玻璃看红色物体是黑色的。

codepen示例代码

TrackballControls轨迹球控件

github地址：github.com/JonLim/thre…
cdn地址：ithanmang.gitee.io/threejs/hom…
细心的朋友会发现，我们可以通过控制鼠标放大缩小拖动场景改变了，当浏览器尺寸发生变化时，场景中的物体也会跟着改变，这里我引用了轨迹球空间TrackballControls和css上的一些处理
浏览器样式调整,隐藏浏览器滚动条

body {
  margin: 0;
  overflow: hidden;
}

浏览器尺寸改变时，更新摄像机长宽比，改变渲染器大小

function threeStart() {
    ...
    /* 监听事件 */
    window.addEventListener('resize', onWindowResize, false);
}

/* 窗口变动触发 */
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

添加轨迹球控件
- 轨迹球控件cdn不稳定，最好是下载到本地

/* 控制器 */
function initControls() {
    /* 轨迹球控件 */
    controls = new THREE.TrackballControls(camera, renderer.domElement);

    /* 属性参数 */
    controls.rotateSpeed = 0.2;// 旋转速度
    controls.zoomSpeed = 0.2;// 缩放速度
    controls.panSpeed = 0.1;// 平controls

    controls.staticMoving = false;// 静止移动，为 true 则没有惯性
    controls.dynamicDampingFactor = 0.2;// 阻尼系数 越小 则滑动越大

    controls.minDistance = 1; // 最小视角
    controls.maxDistance = 500;// 最大视角 Infinity 无穷大
}

/* 数据更新 */
function update() {
    controls.update();
}

function animation() {
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    update()
}

function threeStart() {
    ...
    initControls();
}

总结

这一节我们主要讲了以下内容

光的种类-环境光
光的反射和吸收
TrackballControls轨迹球控件

ThreeJs入门12-光的初体验-环境光

环境光

绿色玻璃看到红色物体是什么颜色？

TrackballControls轨迹球控件

总结