一文带你了解three.js在Vue项目中的基本使用

简介

three.js是一款三维图形引擎，基于WebGL和WebGL2。它可以用来创建复杂的3D场景和动画，也可用于2D渲染。

在Vue项目中使用three.js，我们需要通过npm安装three。

安装

使用如下命令安装three：

npm install three

创建画布

定义Canvas：

<template>
  <div>
    <canvas ref="canvas" />
  </div>
</template>

定义样式：

canvas {
  width: 100%;
  height: 100%;
}

引入three.js

在需要的页面中引入three.js：

import * as THREE from 'three';

添加场景

我们需要创建一个场景来渲染3D模型：

this.scene = new THREE.Scene();

添加相机

相机的作用是决定场景中那一部分会显示在屏幕上，以及以什么方式显示。我们需要定义好相机的位置和朝向：

this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.z = 5;

添加渲染器

渲染器将场景和相机渲染到画布上，我们可以创建一个渲染器并把它绑定到Canvas组件上：

this.renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: this.$refs.canvas,
});
this.renderer.setSize(window.innerWidth, window.innerHeight);

添加立方体

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

渲染场景

在场景被创建后，我们需要使用渲染函数来更新场景，使用requestAnimationFrame函数：

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

示例1：添加纹理

const loader = new THREE.TextureLoader();
const texture = loader.load('/textures/crate.gif');
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);

示例2：使用自定义着色器

const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;
const fragmentShader = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
const geometry = new THREE.BoxGeometry();
const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
});
this.cube = new THREE.Mesh(geometry, material);
this.scene.add(this.cube);