初识Three.js，笨鸟先飞Three.js是一个用于创建3D图形的JavaScript库。它提供了大量的功能和工具，

点赞 + 关注 + 收藏 = 学会了

本文使用的Three.js的版本是： 154

本文章适用于和我一样的小白同学，通过学习，摆脱小白🥬的身份

Three.js介绍

介绍：Three.js是一个用于创建3D图形的JavaScript库。它提供了大量的功能和工具，使您能够轻松地在Web环境中创建各种令人惊叹的3D效果和交互体验。

three.js官方文档：threejs.org/

Threejs中文网(电子书课件) ： webgl3d

github:three

探索threejs:discoverthreejs

安装引用

1 安装

我本次使用的环境是vue环境，所以直接使用npm或者yarn 进行安装了

npm install three  
yarn add three

2 引用

vue中

import * as THREE from 'three'

其他方式通过CDN方式引入

<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>

Three.js三大要素（核心）

场景（scene）、相机（camera）、渲染器（renderer）

1. 场景（scene）

场景是three.js中的一个抽象概念，表示我们想要呈现的3D环境。我们可以将物体、光源和相机等元素添加到场景中。场景管理着所有的对象和元素。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

2 相机（camera）

相机决定了我们在场景中看到的部分。three.js提供了不同类型的相机，包括透视投影相机（PerspectiveCamera）和正交投影相机（OrthographicCamera）。通过设置相机的位置、目标和视角等属性，我们可以控制观察者的视角和范围。

透视投影相机`PerspectiveCamera`：视锥体

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。视锥体.png

正交投影相机`OrthographicCamera`

透视投影相机的参数left, right, top, bottom, near, far 正交投影.webp

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera()

3 渲染器（renderer）

渲染器负责将场景中的3D元素渲染到浏览器的画布（canvas）上。three.js支持多种渲染器，包括WebGLRenderer、CanvasRenderer和SVGRenderer等。WebGLRenderer是最常用的渲染器，它利用WebGL技术实现高性能的3D渲染。

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

既然我们学习完它的基本要素，我们就开始进入第一步，开启自己的three.js之旅

立方体

<template>
  <div class="container" ref="container" />
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const container = ref()

function initThree(instance) {
// 创建场景
  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)

  // 将渲染器添加到DOM元素中
  container.value.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

  // 创建动画函数，旋转立方体
  const animate = function () {
    requestAnimationFrame(animate)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    renderer.render(scene, camera)
  }

  // 调用动画函数
  animate()
}

onMounted(() => {
  initThree()
})

</script>

<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

初识Three.js，笨鸟先飞