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/dat.gui/tree/master/build
这里直接把那个打包好的文件下载来引用就行了。
使用这个我们可以用面板的形式来控制参数,从而动态更改展示的效果,比如:
图片描述
看,我这可以通过动态修改数据来让方块进行旋转~

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绘制的基本过程的理解。
另外还学习了控制面板工具!能帮助我们更好的理解和观察~
明天我准备继续跟着视频先学,然后再去研究一下材料这个东西,嘻嘻,晚安啦!