THREE.JS入门教程(1)THREE.JS使用前了解

什么是THREE.JS

THREE.JS是JavaScript编写的WebGL第三方库，它可以让我们轻松地在浏览器上创建有趣的3D场景和模型，是一个非常流行的3D游戏和图形应用开发工具。

THREE.JS前置知识

在学习THREE.JS之前，需要掌握以下技能：

• HTML、CSS和JavaScript基础语法
• WebGL基础知识，包括顶点和片元着色器、着色器语言等
• 3D图形学基础知识，包括矩阵、向量、相机、光源等

THREE.JS使用入门

第一步：导入THREE.JS

要使用THREE.JS，首先需要在HTML文件中导入THREE.JS的库文件，可以使用CDN或者本地文件。

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

第二步：创建场景

在THREE.JS中，所有的3D元素都是在一个场景(scene)中创建的。创建场景的代码如下：

var scene = new THREE.Scene();

第三步：创建相机

在THREE.JS中，相机(camera)用于定义我们所看到的场景。创建相机的代码如下：

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

第四步：创建渲染器

THREE.JS使用WebGL来渲染3D场景，因此需要创建一个WebGL渲染器(renderer)，并将其添加到页面中。创建渲染器的代码如下：

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

第五步：创建物体

在THREE.JS中，物体(object)可以是几何形状(geometry)和材质(material)的组合。创建一个红色立方体的代码如下：

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

第六步：渲染场景

最后，需要将场景和相机传递给渲染器，并调用渲染方法。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

以上就是THREE.JS的入门操作，通过以上步骤我们可以快速创建出一个简单的3D场景。

示例说明

示例1：旋转的立方体

下面是一个旋转的立方体的示例演示，代码在上面已经介绍过，这里不再重复。 查看示例

示例2：多个立方体组成的群落

下面是一个由多个立方体组成的群落的示例演示，这个示例演示了如何使用循环和随机函数来创建一个群落。

首先，我们创建一个空的群组(group)：

var group = new THREE.Group();

接下来，使用循环创建20个随机位置的立方体，并将它们添加到群组中：

for (var i = 0; i < 20; i++) {
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });
    var cube = new THREE.Mesh(geometry, material);
    cube.position.x = Math.random() * 10 - 5;
    cube.position.y = Math.random() * 10 - 5;
    cube.position.z = Math.random() * 10 - 5;
    group.add(cube);
}

最后，将群组添加到场景中，并设置旋转效果：

scene.add(group);

function animate() {
    requestAnimationFrame(animate);
    group.rotation.x += 0.01;
    group.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

查看示例