打造互动式3D立方体，纹理贴图加持，鼠标控制运动指哪打哪

用 three.js 创建具有互动纹理贴图的 3D 立方体

简介

three.js 是一个流行的 JavaScript 库，用于创建和呈现 3D 图形。它是一个功能强大的工具，可让您轻松地创建交互式 3D 场景。在本教程中，我们将向您展示如何使用 three.js 创建具有互动纹理贴图的 3D 立方体。

准备

首先，您需要确保已安装 three.js 库。您可以从官方网站下载库或使用 CDN。接下来，您需要创建一个 HTML 文件和一个 JavaScript 文件。

创建场景

在 JavaScript 文件中，让我们创建一个场景、一个相机和一个渲染器。场景是将包含我们 3D 对象的地方，相机用于查看场景，渲染器用于将场景呈现到画布上。

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

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

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

创建立方体

接下来，让我们创建一个立方体几何体。这是我们将应用纹理贴图的 3D 对象。

// 创建立方体几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

加载纹理

现在，我们需要加载我们将应用于立方体的纹理图像。

// 创建纹理加载器
var loader = new THREE.TextureLoader();

// 加载纹理
var texture = loader.load('texture.jpg');

创建材质

材质定义了对象的表面属性，例如颜色、纹理和透明度。我们将创建一个基本材质并应用我们的纹理。

// 创建材质
var material = new THREE.MeshBasicMaterial({
  map: texture
});

创建网格

网格是几何体和材质的组合。我们将创建一个网格并将其添加到场景中。

// 创建网格
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

添加交互性

现在，让我们添加鼠标事件侦听器来控制立方体的运动。

// 添加鼠标事件侦听器
document.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {

  // 计算鼠标位置
  var mouseX = event.clientX;
  var mouseY = event.clientY;

  // 计算立方体的位置
  var cubePosition = new THREE.Vector3();
  cubePosition.x = mouseX / window.innerWidth * 2 - 1;
  cubePosition.y = -(mouseY / window.innerHeight) * 2 + 1;

  // 更新立方体的位置
  cube.position.x = cubePosition.x;
  cube.position.y = cubePosition.y;
}

渲染循环

最后，我们需要一个渲染循环来不断更新和渲染场景。

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

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

animate();

常见问题解答

• 如何更改纹理图像？

要更改纹理图像，只需使用另一个图像路径替换 texture.jpg。

• 如何控制立方体的旋转？

您可以通过更改 cube.rotation.x 和 cube.rotation.y 来控制立方体的旋转。

• 如何添加灯光到场景？

要添加灯光到场景，可以使用 THREE.PointLight 或 THREE.AmbientLight。

• 如何将阴影添加到场景？

要将阴影添加到场景，您需要使用 THREE.ShadowMapType 和 THREE.DirectionalLight。

• 如何导出场景为图像或视频？

您可以使用 THREE.WebGLRenderer 的 toDataURL 和 toDataURI 方法导出场景为图像或视频。