JS 3D引擎|极客笔记

JS 3D引擎

简介

3D引擎是一种用于构建和渲染三维场景的软件工具。它们提供了创建、显示和交互3D图形的功能。在过去，构建3D应用程序通常需要使用专业的软件工具和编程语言。然而，随着Web技术的发展，现在可以使用基于JavaScript的3D引擎来创建和展示精美的3D图形。

这篇文章将介绍一些常见的JavaScript 3D引擎，包括其特点、用途和示例代码。

Three.js

Three.js是最流行的JavaScript 3D引擎之一。它是一个开源库，提供了丰富的功能来创建和渲染3D图形。Three.js支持各种不同类型的3D对象，包括几何体、光源、材质和纹理。

特点

简单易用：Three.js提供了简洁的API，使得创建和展示三维场景变得简单。
兼容性强：Three.js可以在支持WebGL的现代浏览器中运行，并且还提供了较为兼容的Canvas渲染器供不支持WebGL的浏览器使用。
功能丰富：Three.js支持动画、摄像机控制、光照、阴影、碰撞检测等高级功能，能够创建出逼真的3D效果。
社区活跃：Three.js拥有庞大的开发者社区，提供了许多示例代码、教程和文档，便于学习和使用。

示例代码

下面是一个使用Three.js创建并渲染一个立方体的简单示例：

// 创建场景
var scene = new THREE.Scene();

// 创建几何体
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格对象
var cube = new THREE.Mesh(geometry, material);

// 将对象添加到场景中
scene.add(cube);

// 创建摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

运行结果

该示例代码会在浏览器中创建一个绿色的立方体，并将其旋转。

Babylon.js

Babylon.js是另一个流行的JavaScript 3D引擎，提供了强大的功能和易用的API。它支持多种渲染器，包括WebGL、WebGL 2和Canvas。Babylon.js在游戏、可视化和虚拟现实等领域中得到广泛应用。

特点

强大的渲染能力：Babylon.js支持高级渲染技术，如PBR材质、全局光照和实时阴影。
内置物理引擎：Babylon.js集成了物理引擎，可以模拟真实世界的物理效果，如重力、碰撞和摩擦。
灵活的摄像机控制：Babylon.js提供了多种摄像机类型和控制器，可以轻松实现漫游、第一人称和第三人称视角。
动画系统：Babylon.js支持骨骼动画、路径动画和粒子系统，可以创建出流畅的动画效果。

示例代码

下面是一个使用Babylon.js创建并渲染一个球体的简单示例：

// 创建引擎
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

// 创建场景
var scene = new BABYLON.Scene(engine);

// 创建相机
var camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// 创建光源
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// 创建球体
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

// 创建渲染循环
engine.runRenderLoop(function () {
    scene.render();
});

// 监听窗口大小变化
window.addEventListener("resize", function () {
    engine.resize();
});

运行结果

该示例代码会在网页中创建一个带有相机控制的球体。

Cesium

Cesium是一种基于WebGL的JavaScript库，用于创建地球和宇宙等场景的可视化。它提供了高性能的图形渲染和地理空间分析功能，可以在浏览器中实现地球的三维展示和交互。

特点

地理空间分析：Cesium提供了一套强大的地理空间分析工具，支持地形分析、坐标转换、路径规划等功能。
大规模可视化：Cesium能够高效渲染大规模地理数据，如卫星影像、地形模型和矢量数据。
插件扩展能力：Cesium支持开发插件和扩展，可以根据需求添加自定义的功能和效果。
跨平台支持：Cesium可以在桌面浏览器、移动设备和虚拟现实平台上运行，具有较好的跨平台兼容性。

示例代码

下面是一个使用Cesium创建并渲染一个地球的简单示例：

// 创建场景
var viewer = new Cesium.Viewer("cesiumContainer");

// 添加地球
var globe = viewer.scene.globe;

// 添加自定义数据
var dataSource = new Cesium.CzmlDataSource();
dataSource.loadUrl("path/to/data.czml");
viewer.dataSources.add(dataSource);

// 相机位置控制
viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-74.0, 40.7, 500000.0) });