Three.js 场景 - Javascript

简介

Three.js 是一个用于创建三维图形的 Javascript 库。它基于 WebGl 技术，可以在现代浏览器中实现高质量的渲染效果。

Three.js 提供了许多内置的几何形状（如立方体、球体等）、材质（如基本材质、纹理材质等）和光源（如点光源、方向光源等）。使用它们可以轻易地创建出自己的 3D 场景。

使用

安装

要使用 Three.js，可以通过 npm 安装：

npm install three

或者直接在 HTML 页面中引入它：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

创建场景

使用 Three.js 创建一个场景，需要以下几个步骤：

1. 初始化渲染器、相机和场景。
2. 创建几何体、材质和网格，并添加到场景中。
3. 渲染场景。

以下是一个基本的 Three.js 场景创建代码片段：

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

// 初始化场景
const scene = new THREE.Scene();

// 创建一个红色立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

更多功能

Three.js 提供了许多更高级的功能，包括材质贴图、阴影、粒子系统等。以下是一些示例代码：

• 使用纹理材质：

const texture = new THREE.TextureLoader().load("texture.jpg");
const material = new THREE.MeshBasicMaterial({ map: texture });

• 创建阴影：

renderer.shadowMap.enabled = true;

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
light.castShadow = true;
scene.add(light);

const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.receiveShadow = true;
scene.add(ground);

• 创建粒子系统：

const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];

for (let i = 0; i < 10000; i++) {
  const x = Math.random() * 2000 - 1000;
  const y = Math.random() * 2000 - 1000;
  const z = Math.random() * 2000 - 1000;
  positions.push(x, y, z);

  const r = Math.random();
  const g = Math.random();
  const b = Math.random();
  colors.push(r, g, b);
}

geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({ size: 10, vertexColors: true });
const points = new THREE.Points(geometry, material);
scene.add(points);

总结

使用 Three.js 可以轻易地创建出高质量的 3D 场景。它提供了许多常用的几何体、材质和光源，并且也支持更高级的功能。使用其中的 API，可以创建出令人惊叹的 3D 效果。