ThreeJs入门03-重构框架并绘制一条线

重构框架

在上一章中，我们已经创建了一个简单的Three.js场景，并在其中添加了一个立方体。在本节中，我们将重构我们的代码，将其分成几个不同的函数，以便更容易理解和维护。

首先，我们将创建一个名为init()的函数，负责初始化Three.js场景。这个函数将创建渲染器、场景和相机。

function init() {
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  // 将相机添加到场景中
  scene.add(camera);

  // 返回渲染器、场景和相机
  return {
    renderer,
    scene,
    camera,
  };
}

接下来，我们将创建一个名为createLine()的函数，负责创建一条线段。这个函数将创建一个几何体和一个材质，然后将它们组合成一个线段。

function createLine() {
  // 创建几何体
  const geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(-1, 0, 0));
  geometry.vertices.push(new THREE.Vector3(1, 0, 0));

  // 创建材质
  const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

  // 将几何体和材质组合成一个线段
  const line = new THREE.Line(geometry, material);

  // 返回线段
  return line;
}

最后，我们将创建一个名为render()的函数，负责渲染场景。这个函数将使用渲染器将场景渲染到屏幕上。

function render(renderer, scene, camera) {
  // 渲染场景
  renderer.render(scene, camera);

  // 请求浏览器在下一个动画帧调用render()函数
  requestAnimationFrame(() => {
    render(renderer, scene, camera);
  });
}

现在，我们可以将这些函数组合起来，创建一个完整的Three.js应用程序。

// 初始化场景
const { renderer, scene, camera } = init();

// 创建一条线段
const line = createLine();

// 将线段添加到场景中
scene.add(line);

// 开始渲染场景
render(renderer, scene, camera);

绘制一条线

现在，我们已经重构了我们的代码，我们可以开始绘制一条线段了。

首先，我们需要创建一个几何体来定义线段的形状。我们将创建一个简单的直线，从(-1, 0, 0)到(1, 0, 0)。

const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-1, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 0, 0));

接下来，我们需要创建一个材质来定义线段的颜色和外观。我们将创建一个简单的红色线段。

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

最后，我们需要将几何体和材质组合成一个线段。

const line = new THREE.Line(geometry, material);

现在，我们可以将线段添加到场景中。

scene.add(line);

最后，我们需要开始渲染场景。

render(renderer, scene, camera);

现在，您应该可以在屏幕上看到一条红色的线段了。

结论

在本指南中，我们介绍了如何使用Three.js创建一个一条线段。我们还介绍了如何重构我们的代码，使其更容易理解和维护。希望本指南对您有所帮助。