ThreeJs中场景（scene）、相机（camera）、渲染器（renderer）等方法类使用

最新推荐文章于 2025-09-16 10:18:26 发布

原创

最新推荐文章于 2025-09-16 10:18:26 发布 · 9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #three.js #webgl

本文介绍了WebGL的基础概念，着重讲解了Three.js在创建3D图形和动画中的应用，包括场景、摄像机、渲染器的构建，着色器的使用，以及如何创建和操纵3D模型、材质和光照。此外，还涉及鼠标事件处理和CSS3D渲染器的使用。

ThreeJs笔记

简介

WebGL（Web Graphics Library，Web图形库），是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。 WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。通过这些接口，开发者可以直接跟GPU进行通信。

WebGL 程序分为两部分：

使用 Javascript 编写的运行在CPU的程序
使用 GLSL 编写的运行在GPU的着色器程序

着色器程序接收CPU传过来的数据，并进行一定处理，最终渲染成丰富多彩的应用样式。着色器程序如下：

// 顶点着色器
var vertex_shader_source =
    'void main() {' +
    '   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);' + // 设置顶点坐标
    '   gl_PointSize = 10.0;' + // 设置顶点的大小
    '' +
    '}';
 
// 片元着色器
var fragment_shader_source =
    'void main(){' +
    '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' + //设置顶点颜色
    '}';

原生WebGL 能绘制的基本图元只有 3 种，分别是点、线段、三角形，对应了物理世界中的点线面。所有复杂的图形或者立方体，都是先用点组成基本结构，然后用三角形将这些点构成的平面填充起来，最后由多个平面组成几何体。但现实情况是，如果想生成满足各种应用场景的复杂形状，几何结构会非常复杂，代码写起来也会非常复杂。所以我们选择借助一些3d渲染框架来实现应用场景的复杂形状。

例如threeJs（Three.js是国内文档资料最多、使用最广泛的三维引擎）

ThreeJs，是一个基于原生WebGL，轻量级，跨平台的Javascript库，可以在浏览器上结合HTML5的canvas,SVG或者WebGL，创建和展示3D模型和动画。允许我们在不依赖任何浏览器插件的情况下，创建一个GPU加速的3D动画场景，这可能得益于WebGL的出现，因为WebGL的底层实现是基于OpenGL。

Three.js官网

ThreeJs入门使用

原生创建一个WebGL程序，一般需要4个步骤：

初始化WebGL绘图上下文
初始化着色器程序
建立模型和数据缓存
完成绘制和动画

但是对于Treee.js却有所不同，其使用面向对象的方式来构建程序，包含3个基本对象：场景（scene）、相机（camera）、渲染器（renderer）。

一、获取three.js

demo版本控制

"node": "v16.18.1",
"three": "0.156.1", 
"vue": "3.3.4",

下载依赖

npm install three

项目中引入

import * as THREE from 'three'; //导入全部核心包
import {
   
    Scene } from 'three'; //按需导入
// 引入附加组件，附加组件，必须显式导入，例如轨道控制OrbitControls
import {
   
    OrbitControls } from ' three/examples/jsm/controls/OrbitControl

注：附加组件以及其他需要单独引入依赖three内置在examples文件夹下

二、创建场景、摄像机、渲染器（画布）

场景（scene）：用于把创建完成的模型添加到画布中。
摄像机（camera）: 相当于人眼所在的位置；
渲染器（renderer）：相当于canvas 画布元素。
创建三个元素之后，把画布插入到html 元素中

const scene = new THREE.Scene();
// 设置场景背景
const textureLoader = new THREE.TextureLoader()
// scene.background = new THREE.Color(0xaaaaaa)
scene.background = textureLoader.load('src/assets/images/t2.png', () => {
   
   
  renderer.render(scene, camera)
})

// 创建摄像机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000); // （角度  ， 长宽比  ， 最近看到的距离， 最远）
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position); //将相机指向场景

//创建webgl渲染器 (画布)
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xeeeeee); //canvas画布颜色 会被scene.background覆盖
renderer.setSize(window.innerWidth, window.innerHeight);  //canvas 画布大小	
	
// 将这个canvas元素插入到 html中
document.getElementById('chartlet-box').appendChild(renderer.domElement);
renderer.render(scene, camera);