一、Just do it

1.1 Three.js渲染在哪？

我们都知道Three.js是Webgl的封装，而Webgl是一个JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，它只作用于canvas元素。因此首先需要在页面中创建一个canvas元素。

 <canvas class="webgl"></canvas>

1.2 导入Three并创建场景

import * as THREE from 'three';
const scene = new THREE.Scene();

1.3 创建一个正方体并将它添加到场景中

在Three.js中，创建一个几何体，也就是创建一个Mesh类的实例，它有两个参数分别是geometry(几何体)以及material(材质)。创建完之后需要将其添加到场景中。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 使用最基础的材质，颜色设为红色
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

1.4 创建相机

相机的种类有很多，我们推荐使用PerspectiveCamera透视相机，它可以用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的相机。

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3; // 相机的初始位置是和正方体叠在一起的，需要往后（向屏幕外）移动，这样后面我们才能看见正方体
scene.add(camera);

1.5 获取canvas元素并渲染到canvas上

const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.render(scene, camera)

到现在为止，我们的场景中就会出现我们的正方体啦~

1.6 如何让正方体旋转起来

要想让让其旋转起来，我们需要借助requestAnimationFrame，这个函数其实并不只是用来做动画的，它的作用就是在浏览器的下一帧执行我们的函数参数，我们用其实现动画是最佳的选择！我们现在需要在浏览器的每下一帧更改我们正方体的位置并做一次渲染即可。

const tick = () => {
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

tick();

好啦，现在我们已经成功使用Three.js在场景中创建一个旋转正方体啦，码上掘金如下：

码上掘金

最后

看，我们只用了五十行不到的代码就实现了一个旋转的正方体，还是挺有趣的，总结一下，Three.js对新手比较友好，上手比较容易~，可以作为入门Web3D的首选引擎！

⚾如果你对本专栏感兴趣欢迎点赞关注+收藏，后面会持续更新，更多精彩知识正在等你！😘
🏉此外笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎳深入浅出JavaScript

⚡初识Three.js，在场景中创建一个旋转的正方体~