前言
今天我们将学习使用第一章通俗易懂的THREE.js学习之路 - 掘金 (juejin.cn)总结的规律使three.js完成更真实的3d效果。
最终我们将学会怎么样轻松的把下面这座小屋子放到我们的网页中。
介绍
首先我们来看看这个例子(example6^1^)
一一道来
在这个例子中，我们看到了更逼近现实世界的效果，包括阴影，物体。
完成该例子，我们至少需要知道如何放置一个物体，以及设置点光源。
物体
ts
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,否则无论如何都不会有阴影的效果。
光
ts
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)
一行即可完成环境光的设置，这是由于环境光没有什么可以设置的属性，仅是一个从全部方位射来的光。
平面
当完成以上两步骤后我们会发现并没有阴影，这是由于阴影被投射到了无限远的地方，我们需要一个平面承接住阴影。
ts
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个单位。
注意到我们没有给它设置双面材质，因此我们会发现从下往上看是看不到任何东西的(无法理解这段描述可以尝试在项目网站试试看)。
不要忘记将他们放入场景哟。
总结
至此我们完成了一个处于黑暗中的小方块。目前为止，我们还缺少了的一些内容有:
- 噪声(用于给物体表面有起伏效果)
- 大量重复(任何物体都不是简单的形状)
噪声可能会在未来某天补充，由于其用到相当复杂的数学原理，因此，应该是一个独立的单元。
大量重复则直接地表明了是毫无意义的。
解决方案有两个:
scss
在官网(或其他模型网站)寻找合适例子
使用3d建模软件自己动手不管选择哪个，我们都会得到模型文件(格式有obj，mlt，wasm等),加载它们并不难就不展开了。
计划
后面会再把shadertoy使用指南补上，然后就开始新的领域了。
最近鸽了很久，整了一个有意思的东西。
Footnotes
- 网站来自这里(learn3d-neon.vercel.app)] ↩