Three.js自学碎碎叨（Day 2）

昨天终于把基本的东西给弄清楚了，然后也能写简单的DEMO了，今天主要是想想看还有没有更好的资料，然后继续写一些DEMO来加深一下印象，结果在B站发现了从油管上扒下来的Three.js系列教程，于是我就跟着它学了几节课，虽然英文听的不怎么明白，但是完全No problem，不影响学习。所以在这里来梳理一下今天学到的一些知识。

这是今天最后的成品...感觉像在跳街舞？？?

一些新的东西

建立坐标轴

我们可以向场景中添加坐标轴，来帮助我们更好的理解！

var axis = new THREE.AxisHelper(30);
scene.add(axis);

我们添加了一个长度为30的轴。
这里的轴好像可以有3种颜色，红、蓝、绿，其实最后也能看出来，就应验了昨天的右手定则坐标系，我们可以清楚看到x、y和z轴的方向。

建立网格栏

我们还可以向场景中添加一个网格，同样也是帮助我们更好的把握空间的结构。

var grid = new THREE.GridHelper(100, 20, 0xff0000, 0x000000);
scene.add(grid);

这里的参数分别是：网格长度、网格块大小。所以这里是100/20=5，5长度一个块。最后两个参数是表示颜色的。第一个颜色叫做中心线颜色，第二个就是网格的颜色。

可以看到这里，穿过中心的两条线就是红色啦！然后网格是黑色。

PlaneGeometry

建立一个平面。
这里平面的主要用途其实是想把那个阴影给投出来。它和其他几何体是一样的，除了基本的形状外，还需要指定一个材料，最后结合：

var planeGeometry = new THREE.PlaneGeometry(30, 30, 30);
var planeMeterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMeterial);

然后效果就是上图中的那块黑色的地板！?为什么定了它是白色但是它还是有点黑呢？主要还是和它的材质有关，所以要好好研究一下几种材料(to do)。

如何显示投影？

首先，要用比较新版本的Three.js的CDN哦！
然后可以打开官网的API去查询，这个DEMO使用的是点光源，我们的目标是让影子投影到平面上。这里需要做几个事情：

1. 给渲染器设置接受投影。

   renderer.shadowMap.enabled = true; // 设置为允许投影
   renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认情况下就是这个柔和的光

2. 给方块和光源设置投影。

   cube.castShadow = true;
   spotLight.castShadow = true;

3. 给平面设置接受投影。

   plane.receiveShadow = true;

然后就OK了。

使用dat GUI来控制

github仓库：https://github.com/dataarts/d...
这里直接把那个打包好的文件下载来引用就行了。
使用这个我们可以用面板的形式来控制参数，从而动态更改展示的效果，比如：

看，我这可以通过动态修改数据来让方块进行旋转～

var guiControls = new function () {
    this.rotationX = 0.01;
    this.rotationY = 0.01;
    this.rotationZ = 0.01;
}

首先创造一个对象！后面这个function其实是一个构造函数～new一下对象就出来了，里面有内置的3个属性。
然后新建一个dat GUI对象：

var datGUI = new dat.GUI();
datGUI.add(guiControls, 'rotationX', 0);
datGUI.add(guiControls, 'rotationY', 0);
datGUI.add(guiControls, 'rotationZ', 0);

我们分别，拿到这三个属性，并把它添加到这个dat GUI面板上去！所以旁边菜单选择就有了3个选择，当然我们也可以，只添加一个看看，就只会有一个出现在面板上。

最后在render动画函数里面，把值进行替换：

function render () {
    cube.rotation.x += guiControls.rotationX;
    cube.rotation.y += guiControls.rotationY;
    cube.rotation.z += guiControls.rotationZ;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其实这里我们也能知道，它实现的原理，其实就是把对象里的值和面板连接了起来，也没什么很神奇的^—^。

小结

今天通过一个综合例子，加深了对Three.js绘制的基本过程的理解。
另外还学习了控制面板工具！能帮助我们更好的理解和观察～
明天我准备继续跟着视频先学，然后再去研究一下材料这个东西，嘻嘻，晚安啦！