three.js 创建球体

📌 相关文章

📜 three.js 创建球体 - Javascript (1)

📅 最后修改于: 2023-12-03 14:47:58.344000 🧑 作者: Mango

概述

Three.js 是一个用于创建 3D 动画的 JavaScript 库。它基于 WebGL 技术，可以在浏览器中渲染 3D 图形。

在 Three.js 中，创建一个球体非常简单。本文将介绍如何使用 Three.js 创建一个球体。

步骤

第一步：引入 Three.js 库

在创建球体之前，需要先引入 Three.js 库。可以在 html 中使用以下代码：

<script src="https://cdn.jsdelivr.net/npm/three"></script>

或者使用 npm 安装：

npm install three

第二步：创建场景、相机和渲染器

在使用 Three.js 创建 3D 图形时，需要先创建场景、相机和渲染器。

场景（Scene）是所有 3D 对象的容器，相机（Camera）决定了场景中哪些部分会显示在屏幕上，而渲染器（Renderer）将场景和相机渲染成最终的 2D 图像。

可以使用以下代码创建场景、相机和渲染器：

// 创建场景
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);

第三步：创建球体

在 Three.js 中，可以使用 THREE.SphereGeometry 类来创建一个球体的几何形状。然后创建一个 THREE.Mesh 类对象，并指定几何形状和材质，最后将球体添加到场景中。

可以使用以下代码创建一个球体：

// 创建球体几何形状
const geometry = new THREE.SphereGeometry( 5, 32, 32 ); // 半径为 5，水平方向上32个面，垂直方向上32个面

// 创建材质
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); // 红色材质

// 创建球体对象
const sphere = new THREE.Mesh( geometry, material ); 

// 将球体添加到场景中
scene.add( sphere );

第四步：渲染场景

最后一步是将场景和相机渲染成最终的图像。可以使用以下代码实现：

function animate() {
  requestAnimationFrame( animate );

  // 使球体旋转
  sphere.rotation.x += 0.01; 
  sphere.rotation.y += 0.01;

  renderer.render( scene, camera );
}
animate();

完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js 创建球体</title>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three"></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.SphereGeometry( 5, 32, 32 ); // 半径为 5，水平方向上32个面，垂直方向上32个面

      // 创建材质
      const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); // 红色材质

      // 创建球体对象
      const sphere = new THREE.Mesh( geometry, material ); 

      // 将球体添加到场景中
      scene.add( sphere );

      function animate() {
        requestAnimationFrame( animate );

        // 使球体旋转
        sphere.rotation.x += 0.01; 
        sphere.rotation.y += 0.01;

        renderer.render( scene, camera );
      }
      animate();
    </script>
  </body>
</html>