Three.js简化 WebGL 的使用
Three.js 是一个流行的 JavaScript 库，旨在简化 WebGL 的使用，使开发者能够轻松创建和渲染 3D 图形。它提供了丰富的功能和工具，适合游戏开发、数据可视化和互动应用等。
https://threejs.org/docs/index.html#manual/zh/introduction/Installation
Three.js 的基本使用步骤：
-
引入 Three.js：
- 可以通过 CDN 引入或在项目中安装：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> -
创建场景：
- 创建一个场景、相机和渲染器：
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(); // 创建一个立方体几何体 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个绿色材质 const cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格 scene.add(cube); // 将立方体添加到场景中 -
设置相机位置：
- 调整相机位置，以便可以看到物体：
camera.position.z = 5; // 将相机放置在 z 轴 5 的位置 -
创建渲染循环：
- 创建一个动画循环来更新场景并重新渲染：
function animate() { requestAnimationFrame(animate); // 递归调用以创建动画循环 cube.rotation.x += 0.01; // 旋转立方体 cube.rotation.y += 0.01; renderer.render(scene, camera); // 渲染场景 } animate(); // 启动动画
完整示例：
下面是一个简单的完整示例，展示了如何使用 Three.js 创建并渲染一个旋转的立方体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Example</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
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();
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();
</script>
</body>
</html>
Three.js 的其他功能：
- 光照和阴影：Three.js 支持多种光源和阴影效果，可以实现更真实的渲染。
- 材质：提供了多种材质选项，如 MeshPhongMaterial、MeshStandardMaterial 等，适用于不同的视觉效果。
- 加载模型：支持多种模型格式的加载，如 GLTF、OBJ、FBX 等，可以直接将 3D 模型导入到场景中。
- 粒子系统：可以轻松创建粒子效果，如烟雾、火焰等。
- 动画：Three.js 提供了强大的动画系统，可以对物体进行复杂的动画处理。
通过这些功能，Three.js 使得开发者能够快速构建出丰富的 3D 应用，无需深入了解 WebGL 的底层细节。
原文地址：https://blog.csdn.net/weixin_44719499/article/details/143461818
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！