Threejs 如何构建 3D 世界Threejs 如何构建 3D 世界？可以简单理解为，3D世界是沙滩美女视频站在

Threejs 如何构建 3D 世界？

可以简单理解为，3D世界是沙滩美女视频

站在岸边，看沙滩美女玩乐，形成画面传递到大脑，是不是倍感激动~

摄像头 + 沙滩美女 => 成像 => 沙滩美女视频

首先你得有一个观察点（相机 = 摄像头），看到什么东西（场景 = 沙滩美女），形成画面（渲染器 = 成像能力）

构建过程就是：

相机 + 场景 => 渲染器 => 3D世界

三剑客

其中相机、场景、渲染器，就是 Threejs 的三大世界元素，也是入门核心。

相机

创建一个观察点

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机位置
camera.position.set(200, 200, 200);

场景

// 创建场景
const scene = new THREE.Scene();
// 设置背景色
scene.background = new THREE.Color( 0x444444 );

渲染器

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 把渲染器节点添加到 body 里面
document.body.appendChild(renderer.domElement);

为场景添加元素

三个世界元素有了，但是场景里面还是空空的，灰蒙蒙一片，我们需要给它添加个东西，例如一颗球。

任何一个元素都是由形状和材质组合而成, 所以一颗球，我们需要定义一个球体 + 一种材质 = 一颗球

// 球形几何体
const geometry = new THREE.SphereGeometry(0.5, 32, 32);
// 材质（绿色）
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建真实一颗球
const mesh = new THREE.Mesh(geometry, material);

创建完成一颗球之后，我们需要把它放到场景里面。

// 添加到场景
scene.add(mesh);

构建世界

当我们把所有东西准备好之后，就可以开始构建这个世界了。

首选我们需要把相机对准场景，然后再执行构建世界。

// 相机看向场景
camera.lookAt(scene.position);
// 渲染
renderer.render(scene, camera);

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>2. Threejs 如何构建 3D 世界</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/+esm",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/controls/OrbitControls.js';

      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(200, 200, 200);

      // 创建场景
      const scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x444444 );

      // 球形几何体
      const geometry = new THREE.SphereGeometry(25, 32, 32);
      // 材质
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // 创建真实一颗球
      const mesh = new THREE.Mesh(geometry, material);
      // 添加到场景
      scene.add(mesh);

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

      // 相机看向场景
      camera.lookAt(scene.position);
      // 渲染
      renderer.render(scene, camera);
    </script>
  </body>
</html>

视觉效果