3D 建筑旋转效果：用 HTML、CSS 和 JavaScript 实现交互式可视化

2023-12-10 23:28:05

导语

在现代网页设计中，交互式元素已成为创造引人入胜的用户体验不可或缺的一部分。其中，3D 建筑旋转特效是一种令人惊叹的技术，可以让用户从各个角度探索虚拟建筑结构。本文将深入探讨如何使用 HTML、CSS 和 JavaScript 实现这种效果，并提供一个分步指南，帮助您创建自己的 3D 建筑旋转交互。

技术基础

HTML

HTML（超文本标记语言）是一种用于构建网页内容的标记语言。它使用元素和属性来定义网页的结构和内容。对于 3D 建筑旋转效果，我们可以使用以下元素：

<div>：用于定义包含 3D 模型的容器。
<canvas>：用于在网页上绘制 2D 或 3D 图形。

CSS

CSS（层叠样式表）是一种用于控制网页外观的语言。它可以用来设置元素的样式，例如颜色、大小、位置和动画。对于 3D 建筑旋转效果，我们可以使用以下 CSS 属性：

transform：用于旋转、缩放和移动元素。
transition：用于控制动画的持续时间和缓动效果。

JavaScript

JavaScript 是一种编程语言，用于在网页上添加交互性和动态性。对于 3D 建筑旋转效果，我们可以使用以下 JavaScript 方法：

requestAnimationFrame：用于请求浏览器在每次屏幕刷新时调用函数，实现平滑的动画。
addEventListener：用于监听事件，例如鼠标移动。

分步指南

1. 创建容器

首先，使用 HTML 创建一个 <div> 容器来包含 3D 模型：

<div id="container"></div>

2. 创建画布

在容器内创建一个 <canvas> 元素，用作 3D 模型的画布：

<canvas id="canvas"></canvas>

3. 初始化 Three.js

Three.js 是一个用于创建 3D 图形和动画的 JavaScript 库。将 Three.js 脚本添加到您的网页：

<script src="three.js"></script>

在 JavaScript 文件中，初始化 Three.js 场景：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

4. 加载 3D 模型

使用 THREE.GLTFLoader 加载 3D 建筑模型：

const loader = new THREE.GLTFLoader();
loader.load('building.gltf', (gltf) => {
  scene.add(gltf.scene);
});

5. 添加灯光

为场景添加灯光以照亮模型：

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

6. 设置旋转动画

使用 requestAnimationFrame 和 transform 属性旋转模型：

function animate() {
  requestAnimationFrame(animate);

  model.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

7. 处理用户交互

使用 addEventListener 监听鼠标移动事件，并根据鼠标位置旋转模型：

canvas.addEventListener('mousemove', (e) => {
  const mouseX = (e.clientX / window.innerWidth) * 2 - 1;
  const mouseY = -(e.clientY / window.innerHeight) * 2 + 1;

  camera.position.x = mouseX * 10;
  camera.position.y = mouseY * 10;
  camera.lookAt(scene.position);
});