用三个-DEV365 开发者社区

介绍

在当今的数字世界中，网络技术变得非常强大。我们已经达到了您可以在Web浏览器中体验迷人的3D图形的地步。想象一下，这不需要插件或外部工具；一切都在纯Web内容的范围内。猜猜是什么推动了这一激动人心的变化？它是WebGL，这是一项奇妙的技术，它使渲染2D和3D图形成为可能。但是，嘿，让我们成为现实似乎有些棘手，尤其是对于那些起步的人来说。这就是三分Js作为超级英雄的地方！ Trix.js就像您可信赖的侧球一样，简化了复杂的位，并为3D Web图形的迷人世界提供了更友好的途径。在本文中，让我们踏上一段旅程，探索使用WebGL和三个魔法的3D图形来实现的基础知识。

。

webgl和three.js：完美的匹配

WebGL是一种低级，复杂的API。尽管它提供了巨大的力量和灵活性，但它也带有陡峭的学习曲线。另一方面，Trix.js提供了更高级别的抽象，使开发人员能够创建3D场景，而无需深入研究WebGl的复杂性。

开始简单：旋转立方体

让我们使用three.js对3D立方体进行动画动画，以说明启动的容易。

1.设置

首先，在您的项目中包含三库库：

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

2.创建一个简单的场景

我们需要三个主要组成部分：场景，一个相机和一个渲染器。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3.添加纹理的立方体

要显示一个立方体，我们需要一个盒几何和一个材料来覆盖它。

const geometry = new THREE.BoxGeometry();
  const textureLoader = new THREE.TextureLoader();
  const materials = [
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') }),
    new THREE.MeshBasicMaterial({ map: textureLoader.load('https://threejs.org/examples/textures/crate.gif') })
  ];
  const cube = new THREE.Mesh(geometry, materials);
  scene.add(cube);

4.使立方体动画

我们将创建一个旋转立方体的动画循环。

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

5.放置相机

最后，我们需要将相机稍微放置，以便它可以查看立方体：

camera.position.z = 5;

现在，您会在空白的画布上看到一个旋转的立方体。设置此场景的便利性展示了三分的力量。

结论

只有几行代码，我们已经在网络上深入研究了3D图形的世界。 WebGL用于渲染功率和三个用于抽象的J的组合使开发人员可以直接在浏览器中创建令人惊叹的视觉内容。当您更深入地探索这个领域时，您会发现从复杂的游戏世界到详细模拟的可能性几乎是无限的。愉快的编码！

与我联系