three.js 教程 (three.js官网)

文章编号：570 / 更新时间：2024-12-30 00:16:21 / 浏览：次

简介

Three.js 是一个用于创建和渲染 3D 图形的 JavaScript 库。它是开源的，并且与 WebGL 配合使用，WebGL 是一个 Web 标准，中使用 Three.js，您需要先安装它。有几种方法可以做到这一点：

使用 npm： npm install three
使用 yarn： yarn add three
从 CDN 加载：

创建场景

要创建场景，您可以使用 Scene 类：


 const scene = new THREE.Scene();

创建几何体

要创建几何体，您可以使用 Geometry 类或其子类：


 const geometry = new THREE.boxGeometry(1, 1, 1);

创建材料

要创建材料，您可以使用 Material 类或其子类：


 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

创建网格

网格是一个几何体和材质的组合。要创建网格，您可以使用 Mesh 类：


 const mesh = new THREE.Mesh(geometry, material);

添加 对象到场景

要将对象添加到场景，您可以使用 add() 方法：


 scene.add(mesh);

创建渲染器

要渲染场景，您可以使用 WebGLRenderer 类：


 const renderer = new THREE.WebGLRenderer();

渲染场景

要渲染场景，您可以使用 render() 方法：


 renderer.render(scene, camera);

示例

以下是一个简单的示例，演示如何使用 Three.js 创建和渲染一个立方体：


 // 创建场景const scene = new THREE.Scene();// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);// 创建材料const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建网格const mesh = new THREE.Mesh(geometry, material);// 将对象添加到场景scene.add(mesh);// 设置相机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 设置渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器添加到 DOMdocument.body.appendChild(renderer.domElement);// 渲染场景renderer.render(scene, camera);