通俗易懂的THREE.js学习之路[4]

前言

今天我们将学习使用第一章通俗易懂的THREE.js学习之路 - 掘金 (juejin.cn)总结的规律使three.js完成更真实的3d效果。

最终我们将学会怎么样轻松的把下面这座小屋子放到我们的网页中。

介绍

首先我们来看看这个例子(example6^1^)

一一道来

在这个例子中，我们看到了更逼近现实世界的效果，包括阴影，物体。

完成该例子，我们至少需要知道如何放置一个物体，以及设置点光源。

物体

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0)
    mesh.castShadow = true
    scene.add(mesh);

以上代码，我们制作了一个长宽高为1的几何体，材质颜色为白色(如果发现没有效果，注意这里的颜色一定不要和环境光颜色一样)且有两个面。

面指的是渲染是否会发生在上面，立方体的第二个面在内部，所以理论上只渲染一个面更节省性能。

其中，要注意的是一定要让物体能产生阴影castShadow,否则无论如何都不会有阴影的效果。

光

    const dirLight = new THREE.SpotLight(0xffffff, 1)
    dirLight.position.set(0, 3, 2)
    dirLight.target.position.set(0, 0, 0)
    dirLight.shadow.mapSize.set(1024, 1024)
    dirLight.castShadow = true

以上代码，我们设置了一个点光源，颜色为白色，位置在(0,3,2)照射向(0,0,0),mapSize我们可以直接理解成阴影的层数，数值越高，阴影越清晰，最后也给点光源一个能造成阴影的属性。

在css中写过阴影的同学都知道，必须多写点阴影层数才能更真实

此处我们补充一个简单的光源，环境光。

const ambLight = new THREE.AmbientLight(0x000000, 1)

一行即可完成环境光的设置，这是由于环境光没有什么可以设置的属性，仅是一个从全部方位射来的光。

平面

当完成以上两步骤后我们会发现并没有阴影，这是由于阴影被投射到了无限远的地方，我们需要一个平面承接住阴影。

    const planeGeometry = new THREE.PlaneGeometry(200, 200);
    const planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    planeGeometry.rotateX(-Math.PI / 2);
    // 使平面就接收物体投掷过来的阴影
    plane.receiveShadow = true;
    plane.position.set(0, -0.6, 0)

这段代码我们设置了一个长宽为200，材质为白色的平面，并沿着x轴旋转90度来水平放置，并使其可以接受阴影，最后设置其位置向下放0.6个单位。

注意到我们没有给它设置双面材质，因此我们会发现从下往上看是看不到任何东西的(无法理解这段描述可以尝试在项目网站试试看)。

不要忘记将他们放入场景哟。

总结

至此我们完成了一个处于黑暗中的小方块。目前为止，我们还缺少了的一些内容有:

1. 噪声(用于给物体表面有起伏效果)
2. 大量重复(任何物体都不是简单的形状)

噪声可能会在未来某天补充，由于其用到相当复杂的数学原理，因此，应该是一个独立的单元。

大量重复则直接地表明了是毫无意义的。

解决方案有两个:

在官网(或其他模型网站)寻找合适例子
使用3d建模软件自己动手

不管选择哪个，我们都会得到模型文件(格式有obj，mlt，wasm等),加载它们并不难就不展开了。

计划

后面会再把shadertoy使用指南补上，然后就开始新的领域了。

最近鸽了很久，整了一个有意思的东西。

Footnotes

1. 网站来自这里(learn3d-neon.vercel.app)] ↩