当前位置：首页 > news >正文

threeJS——安装以及三要素

news 2026/4/8 6:45:33

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、安装
二、三要素
- 1.场景
- - 1.1创建场景
  - 1.2向场景添加元素
  - 1.3场景属性
- 2.相机
- - 2.1相机特点
  - 2.2正交相机
  - 2.3空间布局
  - 2.4小姐操作
- 3.渲染器
总结

前言

本章简单介绍前端框架threeJS的使用，使用threeJS我们可以构建出前端的3D界面。不仅能应用在看房、模型分享网站等有需求的项目中，还可以在其他项目中做出酷炫的效果。

一、安装

为了方便查看效果，我们用vite快速创建一个项目,然后使用npm工具进行安装，命令如下：

npm install --save three

安装完成后，我们编写一个html文件测试

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script type="module">import * as THREE from "three";//   创建场景const scene = new THREE.Scene();// 加载图片作为背景// const loader = new THREE.TextureLoader();// loader.load("./image/1.png", (texture) => {//   scene.background = texture;// });//   创建透视相机const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);// 修改相机位置camera.position.set(0, 0, 5);// 旋转相机camera.lookAt(0, 0, 0);// 物体网格const geometry = new THREE.BoxGeometry(1, 1, 1);// 物体材质const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);// 添加到场景scene.add(cube);// 创建网格辅助线const gridHelper = new THREE.GridHelper(10, 10);scene.add(gridHelper);//   创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染出的元素追加到页面document.body.appendChild(renderer.domElement);function animation() {requestAnimationFrame(animation);cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景和相机renderer.render(scene, camera);}animation();</script></body>
</html>

运行后，对应页面上会出现一个不停旋转的立方体
在这里插入图片描述
然后说明threeJS可以使用了

二、三要素

treeJS中有三个重要元素

场景
相机
渲染器

1.场景

场景元素(scene)中存储着我们所有的对象（模型、灯光、摄像机），是一个容器

1.1创建场景

从导入three包中提供的函数，可以创建一个场景对象

import * as THREE from 'three';const scene = new THREE.Scene();

1.2向场景添加元素

有了场景后，我们就可以向里面添加需要的元素，这个元素可以是模型、灯光等，threeJS中提供了多种默认的模型，也可以自己读取建模软件中的模型进行导入，我们试着导入一个默认的立方体：

const geometry = new THREE.BoxGeometry( 1, 1, 1 );// 物体材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

对于模型而言，创建出的物体还需要为其指定材质才能够正常显示。
最后使用BoxGeometry()创建模型顶点数据，用MeshBasicMaterial()创建模型材质,两者结合变成完整的立方体模型，然后添加到场景scene中

1.3场景属性

场景除了可以存储各种元素以外，场景对象本身也有很多属性，比如我们可以使用background属性设置场景背景
在这里插入图片描述

2.相机

threejs中提供了多种类型的相机：正交相机（距离不影响物体大小）、透视相机（物体近大远小）、立方相机（用于全景图）、立体相机。
这里主要使用的是透视相机，因为符合人眼的规律。

2.1相机特点

在开始介绍该对象的属性前，先说一下3D建模中透视相机的特点：
在这里插入图片描述
相机的视野区域是一个立方体（锥体），离我们人眼原的一段是远端，离我们人眼近的一端是近端，处于这个立方体内的物体会被投射到近端，形成画面。

2.2正交相机

我们说过，相机有很多种类型，上面视野范围呈锥体的是透视相机，而正交相机的视角范围是一个立方体，正交相机投射的物体会保留原来的大小（不会近大远小）。
这种相机常被用于一些需要精准测量的模型中，不会因为缩放干扰到数据。
在这里插入图片描述

2.3空间布局

场景中用三维坐标来描述位置，threejs中的布局如下（用blender模拟一下）：
在这里插入图片描述
如果是刚创建出的元素（包括相机）都是生成在场景原点的位置，如果我们想要成功渲染出模型，需要先调整模型和相机的位置，让模型处于相机的可视范围内。

2.4小姐操作

相机可以进行位置的移动和视角的旋转，这些可以帮助我们在页面渲染出一些想要的效果。

// 修改相机位置camera.position.set(0, 0, 10);// 视角中心位置（看向哪）camera.lookAt(5, 0, 0);

3.渲染器

设置好场景和相机后需要使用渲染器才可以真正渲染到页面上。
本质是在canvas标签上来展示效果。
渲染器我们这里介绍WebGLRenderer
调用构造器可以创建对应对象，其中可以设置canvas属性来指定一个已有的canvas标签，在里面渲染效果。

// 创建渲染器const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('.canvas1')});

如果不设置，或者没有现成的canvas元素，就需要用追加节点的方式动态的追加一个新的canvas元素。

document.body.appendChild(renderer.domElement)

这里renderer.domElement指向的是用来渲染的canvas对象，如果在构造方法中指定过，就是我们指定的那一个。如果是没有指定过，就会自动生成一个canvas，这个时候再用来作为追加节点就可以了。

总结

由此我们已经能够简单使用threeJS创建简单模型，不过想要做出酷炫效果，需要导入外部模型，这个后面再说。