【Three.js系列】从入门到入门

看完本文，你可能有如下收获：

• 构建一个three.js的入门demo
• 了解threejs基本概念

⭐️⭐️该收获仅供参考，真实收获以实物为准

Three.js 是一个 3D JavaScript 库，使开发人员能够快速创建 3D 应用。它在 WebGL 之上运行，该库的目标是极大地简化了3D场景的开发。比如如下效果：

threejs的运行需要4个条件：

• scene（场景）

场景就像是一个容器或者说世界，这容器中可以包含对象、模型、粒子、灯光等其他东西放入其中

• object（对象）

可以是几何体、模型、粒子、灯光等

• camera（相机）

在我们渲染场景时，我们所看到的的就是我们的相机角度，可以理解为现实生活中我们看世界的角度，眼睛即相机，在threejs中相机类似于一个锥体，受到视野范围和纵横比（画布的宽度/高度）的影响

near是视锥的前端、far是视锥的后端、fov定义了视野高度

• renderer（渲染器）

进行渲染，将我们的代码与设计渲染到我们的web中，这样就可以将代码设置的贴图纹理之类的效果用浏览器显示出来了

首先需要导入所需的依赖，可以通过三种方式：

• 下载three.js文件（本文使用）。
• npm
• CDN

然后逐一准备上述所需的四大要素（场景、对象、相机、渲染器）即可：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

three.js 中有几个不同的相机。本例使用PerspectiveCamera。参数说明如下：

• 第一个属性是视野。FOV 是在任何给定时刻在显示器上看到的场景范围。该值以度为单位。

• 第二个是纵横比。您几乎总是希望使用元素的宽度除以高度，否则您会得到与在宽屏电视上播放旧电影相同的结果——图像看起来被压扁了。

• 接下来的两个属性是近剪裁平面和远剪裁平面，可以先不管。

这里添加一个立方体，为其设置形状和着色

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

给立方体添加一个旋转效果：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

完整的代码如下：

☀️目前正在更新的相关内容：Java后端、前端、面试真题、校招经验…☀️
感谢各位的观看，文章系个人理解，如有错误请联系我指出 ：）
⛄️创作不易，若是内容对你有帮助的话⛄️
不要忘记点赞、评论、收藏哦！！！