为您的网站融入3D元素：Three.js简明指南

前端

2023-12-03 01:35:30

概述

Three.js是一个强大的JavaScript库，它允许您创建交互式3D图形和动画。它基于WebGL，一个允许您在网络上渲染3D图形的API。Three.js在许多项目中使用，包括游戏、可视化和教育应用程序。

基本概念

在开始使用Three.js之前，我们需要了解一些基本概念。

场景：场景是Three.js中的主要容器，其中包含所有3D对象。
相机：相机是用户查看场景的虚拟视角。
渲染器 ：渲染器将场景中的对象转换为可以在屏幕上显示的图像。
材质：材质定义对象的外观，例如颜色、纹理和阴影。
几何图形 ：几何图形定义对象的形状。

创建简单场景

现在我们已经了解了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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();