700字范文 > 【Three.js入门】渲染第一个场景及物体（轨道控制器坐标轴辅助器移动缩放旋转）

【Three.js入门】渲染第一个场景及物体（轨道控制器坐标轴辅助器移动缩放旋转）

时间：2023-05-01 01:15:52

个人简介

👀个人主页：前端杂货铺
🙋‍♂️学习方向：主攻前端方向，也会涉及到服务端
📃个人状态：在校大学生一枚，已拿多个前端 offer（秋招）
🚀未来打算：为中国的工业软件事业效力n年
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2&Vue3项目实战 🥝Node.js 🍒Three.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享&商务合作，快加入进来吧

Three.js 系列文章目录

文章目录

Three.js 系列文章目录一、前言二、使用 Three.js 渲染第一个场景及物体1、基本步骤2、实例展示三、轨道控制器四、坐标轴辅助器五、设置物体移动六、设置物体的缩放和旋转

【使用 Three.js 实现的效果】

一、前言

什么是 Three.js ？

Three.js 是 JavaScript 编写的 WebGL 第三方库。提供了非常多的3D 显示功能。

你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

Three.js 的应用场景？

开发工业软件、智慧城市、轻量的3D展示、建筑家装，以及其他 3D 展示效果。

几个概念？

场景：场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。

摄相机：摄像机的抽象基类。在构建新摄像机时，应始终继承此类。

渲染器：WebGL Render 用WebGL渲染出你精心制作的场景。

二、使用 Three.js 渲染第一个场景及物体

1、基本步骤

创建场景——>创建相机——>创建物体——>把物体放进场景——>通过渲染器进行渲染

2、实例展示

（1）首先导入进来 three 文件（这里是创建了一个项目，通过 npm install 安装的依赖）
（2）创建场景
（3）创建相机对象（透视相机）
（4）设置相机的位置
（5）在场景里面添加相机
（6）创建几何体和材质
（7）根据几何体和材质创建物体
（8）将几何体添加到场景中
（9）初始化渲染器
（10）设置渲染的尺寸大小
（11）将 webgl 渲染的 canvas 内容添加到 body
（12）使用渲染器，通过相机将场景渲染进来

// 导入 three 文件import * as THREE from 'three'// 创建场景const scene = new THREE.Scene()// 创建相机对象（角度，宽高比，近端，远端）const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)// 设置相机的位置（x，y，z）camera.position.set(0, 0, 10)// 场景里面添加相机scene.add(camera)// 添加物体// 创建几何体const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)// 创建材质const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00})// 根据几何体和材质创建物体const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)// 将几何体添加到场景当中scene.add(cube)// 初始化渲染器const renderer = new THREE.WebGLRenderer()// 设置渲染的尺寸大小renderer.setSize(window.innerWidth, window.innerHeight)// console.log(renderer)// 将 webgl 渲染的 canvas 内容添加到 bodydocument.body.appendChild(renderer.domElement)// 使用渲染器，通过相机将场景渲染进来renderer.render(scene, camera)

三、轨道控制器

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

在上文的基础上进行如下改动，添加轨道控制器，使得物体可旋转

import * as THREE from 'three'// 导入轨道控制器import {OrbitControls } from 'three/examples/jsm/controls/OrbitControls'// 使用控制器查看3d物体......// 使用渲染器，通过相机将场景渲染进来// renderer.render(scene, camera)// 创建轨道控制器（domElement->用于事件监听的 HTML元素）const controls = new OrbitControls(camera, renderer.domElement)// 渲染函数function render() {renderer.render(scene, camera)// 请求动画帧-下一帧的时候重新渲染requestAnimationFrame(render)}render()

【使用轨道控制器效果图】

四、坐标轴辅助器

红色代表 X 轴，绿色代表 Y 轴，蓝色代表 Z 轴。

在上文的基础上添加如下代码，添加坐标轴辅助器

// 添加坐标轴辅助器const axesHelper = new THREE.AxesHelper(4)// 添加到场景中scene.add(axesHelper)

五、设置物体移动

修改 cube 的 position 即可（x、y、z）

在上文的基础上把渲染函数的代码进行如下改动，就可以让物体移动起来

// 渲染函数function render() {cube.position.x += 0.01if (cube.position.x > 4) {cube.position.x = 0}renderer.render(scene, camera)// 请求动画帧-下一帧的时候重新渲染requestAnimationFrame(render)}

【设置物体的移动】