【Three.js基础入门】：创建你的第一个3D场景

西门吹雪~

已于 2024-10-09 19:42:01 修改

阅读量3.9k

点赞数 3

分类专栏： Three.js 文章标签： javascript 3d three.js 前端

于 2023-07-21 16:02:29 首次发布

本文链接：https://blog.csdn.net/weixin_44171297/article/details/131853685

版权

Three.js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Three.js创建3D场景，包括引入库、创建场景、相机和渲染器对象，添加几何体，设置相机位置以及创建简单的3D动画。示例展示了创建星空背景的代码，使读者了解如何通过Three.js制作交互式3D效果。

摘要由CSDN通过智能技术生成

引言：

Three.js是一种强大的JavaScript库，用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验，你也可以通过Three.js轻松地构建令人惊叹的3D场景。

本文将带你逐步学习如何入门Three.js，从创建一个简单的3D场景开始。

创建步骤

我们将介绍如何使用Three.js创建你的第一个3D场景。Three.js是一个基于WebGL的JavaScript库，可以帮助我们在Web上创建3D场景和交互式动画。

1.引入Three.js库

首先，我们需要在HTML文件中引入Three.js库。可以通过使用CDN或下载库文件来实现。在这里，我们将使用CDN方式引入Three.js库。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
    <script>
      // Three.js code here
    </script>
  </body>
</html>

2 创建一个场景对象

接下来，我们需要创建一个场景对象、相机对象和渲染器对象。场景对象是用来存储和管理所有3D对象的容器，相机对象是用来定义我们的视角和观察场景的位置和方向，渲染器对象则是用来渲染场景和相机。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3 添加一个几何体对象

在场景中添加一个几何体对象，我们可以使用Three.js提供的几何体创建函数，并设置材质对象。在这里，我们将使用一个简单的立方体作为我们的几何体对象。
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4.相机设置

最后，我们需要设置相机的位置并启动渲染器来渲染场景和相机。我们可以通过设置相机的位置来改变我们的视角和观察场景的方向。在这里，我们将相机的位置设置为z轴上5个单位的位置。
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5 总结

以上就是创建你的第一个3D场景的基本步骤。完整的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Three.js Scene</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var geometry = new THREE.BoxGeometry();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var 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是如何帮助我们在Web上创建3D场景和交互式动画的。我们可以通过改变几何体对象和材质对象的属性，以及相机的位置和方向，来创建更加复杂和丰富的3D场景。

示例

简单星空

下面是一个简单的Three.js星空示例，我们将创建一个星空背景，展示闪烁的星星。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js星空示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建星星材质
        var starMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.1
        });

        // 创建星星几何体
        var starGeometry = new THREE.BufferGeometry();
        var starVertices = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            starVertices.push(x, y, z);
        }
        starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));

        // 创建星星点云对象
        var stars = new THREE.Points(starGeometry, starMaterial);

        // 将星星点云对象添加到场景中
        scene.add(stars);

        // 将相机位置设为z轴向后200个单位，使星空在视野内
        camera.position.z = 200;

        // 添加动画效果，使星星闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 让星星随机闪烁
            stars.rotation.x += 0.001;
            stars.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>

彩色星空

<!DOCTYPE html>
<html>
<head>
    <title>五彩宇宙星空 - Three.js示例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建透视相机
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

        // 将渲染器添加到HTML页面中
        document.body.appendChild(renderer.domElement);

        // 创建粒子材质
        var particleMaterial = new THREE.PointsMaterial({
            size: 2,
            vertexColors: true, // 开启顶点颜色，使每个粒子有不同的颜色
            transparent: true,
            opacity: 0.7
        });

        // 创建粒子几何体
        var particleGeometry = new THREE.BufferGeometry();
        var particleVertices = [];
        var colors = [];
        for (var i = 0; i < 1000; i++) {
            var x = (Math.random() - 0.5) * 2000;
            var y = (Math.random() - 0.5) * 2000;
            var z = (Math.random() - 0.5) * 2000;
            particleVertices.push(x, y, z);

            // 为每个粒子随机生成一个五颜六色的颜色
            var color = new THREE.Color();
            color.setRGB(Math.random(), Math.random(), Math.random());
            colors.push(color.r, color.g, color.b);
        }
        particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particleVertices, 3));
        particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

        // 创建粒子系统对象
        var particles = new THREE.Points(particleGeometry, particleMaterial);

        // 将粒子系统对象添加到场景中
        scene.add(particles);

        // 将相机位置设为z轴向后1000个单位，使星空在视野内
        camera.position.z = 1000;

        // 添加动画效果，让粒子随机闪烁
        function animate() {
            requestAnimationFrame(animate);

            // 使粒子随机闪烁
            particles.rotation.x += 0.001;
            particles.rotation.y += 0.001;

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 调用动画函数
        animate();
    </script>
</body>
</html>