三分钟玩转 Three.js：一文了解如何用 Three.js 画一个哆啦A梦的时光机

2023-10-13 07:19:31

Three.js：用 WebGL 轻松创造令人惊叹的 3D 世界

Three.js 是什么？

Three.js 是一个免费且开源的 JavaScript 库，可让您在网络浏览器中创建令人惊叹的 3D 场景和动画。它是基于 WebGL 技术，一种可直接利用图形处理单元 (GPU) 来渲染复杂 3D 图形的 API。凭借 Three.js，您可以轻松实现逼真的 3D 效果，例如实时物理模拟、粒子系统和变形动画。

Three.js 的核心概念

要掌握 Three.js，了解其核心概念至关重要：

场景： 这是包含所有 3D 对象的虚拟容器。
相机： 确定您从哪个角度查看场景。
光源： 照亮场景，创建阴影和高光。
几何体： 组成 3D 对象的基本形状。
材质： 定义对象的外观，包括颜色、纹理和透明度。
动画： 使对象运动，例如旋转、平移和缩放。

用 Three.js 创建一个哆啦 A 梦时光机

现在，让我们动手用 Three.js 创建一个标志性的哆啦 A 梦时光机！

设置场景和相机

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

添加光源

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

创建时光机的球体

const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

添加时光机的翅膀

const wingGeometry = new THREE.BoxGeometry(1, 2, 0.2);
const wingMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
const wing1 = new THREE.Mesh(wingGeometry, wingMaterial);
wing1.position.x = 1.5;
wing1.position.y = 1;
wing1.position.z = 0;
const wing2 = new THREE.Mesh(wingGeometry, wingMaterial);
wing2.position.x = -1.5;
wing2.position.y = 1;
wing2.position.z = 0;
scene.add(wing1);
scene.add(wing2);

添加时光机的窗户

const windowGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.2);
const windowMaterial = new THREE.MeshBasicMaterial({color: 0x000000});
const window1 = new THREE.Mesh(windowGeometry, windowMaterial);
window1.position.x = 0;
window1.position.y = 1;
window1.position.z = 1;
const window2 = new THREE.Mesh(windowGeometry, windowMaterial);
window2.position.x = 0;
window2.position.y = -1;
window2.position.z = 1;
scene.add(window1);
scene.add(window2);

添加时光机的门

const doorGeometry = new THREE.BoxGeometry(1, 2, 0.2);
const doorMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.x = 0;
door.position.y = -1;
door.position.z = 0;
scene.add(door);

渲染场景

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

结语

恭喜您创建了自己的 Three.js 哆啦 A 梦时光机！Three.js 的可能性是无限的，因此您可以释放您的创造力并构建惊人的 3D 体验。继续探索，学习更高级的技术，并享受 Three.js 带来的令人兴奋的世界。

常见问题解答