threejs开发教程（Three.js–》前端开发者掌握3d技术不再是梦，初识threejs）

        这十年来 web 得到了快速的发展
  
  
  
  
  
，随着 webgl 的普及 
  
  
  
  
 ，网页的表现能力越来越强大 


 


 


 


 


 ，网页上已经开始可以做出很多复杂的动画和精美的效果
 
 
 
 
 
，还可以通过 webgl 在网页中绘制高性能的3d图形  
   
   
   
   
 ，别的不说 

 

 

 

 

 ，凡是入门程序员都离不开github这个网站

 

 

 

 

 
，细心的人都会发现          ，github首页就使用了3d可视化技术 
 

 
 

 
 

 
 

 
 

 ，如下：

对于网站而言










，web 3d 技术应用               ，实现了企业网站的三维呈现 
 
 
 
 
 
 
 
 
 
 ，让企业形象更加直观更立体的展现给客户















，打破传统平面展示模式          ，而传统的3d技术shader直接让前端开发者去挑战的话其实是有难度的 
 
  
 
  
 
  
 
  
 
  ，因为其和前端真的就是两种不一样的东西









，由此适配前端开发者使用3d技术的three.js应运而生
  
  
  
  
  
，让前端开发者掌握3d技术不再是梦 
  
  
  
  
 ，接下来本专栏将详细介绍three.js的详细使用 


 


 


 


 


 ，以及相关项目的展现
 
 
 
 
 
，关注博主订阅专栏  
   
   
   
   
 ，让学习之路不再迷茫
  
  
  
  
  
。

目录

初识Three.js

Three.js的下载与使用

空间实现3d立方体旋转

空间实现3d立方体移动

空间实现3d立方体缩放与旋转

空间实现3d立方体地面以及阴影效果

初识Three.js

Three.js是浏览器调用电脑渲染模块的webgl框架 

 

 

 

 

 ，但threejs并不是webgl

 

 

 

 

 
，webgl本身也有自己非常底层的代码          ，这方面就涉及一些3d逻辑了 
 

 
 

 
 

 
 

 
 

 ，感兴趣的朋友可以自己去了解一下










，本专栏将着重讲解threejs               ，讲解threejs执行的一些webgl的一些功能 
  
  
  
  
 。

注意：会three.js并不意味着你已经非常掌握了3d建模了 
 
 
 
 
 
 
 
 
 
 ，这是两个概念















，建模需要的是专业的建模软件如：3dmax          、rhino  
 
  
 
  
 
  
 
  
 
 、maya










、blender等          ，复杂的项目需要专门的建模师搭建模型 
 
  
 
  
 
  
 
  
 
  ，然后交给前端来呈现在网页上









，并不是前端来实现建模
  
  
  
  
  
，而three.js就是建模师和前端沟通的桥梁 
  
  
  
  
 ，当然threejs也能实现一些简单的3d效果 


 


 


 


 


 ，但是非常复杂的3d建模还是需要专门的建模师来完成 


 


 


 


 


 。

Three.js版本问题：Three.js处于飞速发展之中
 
 
 
 
 
，过去几年和现在的Three.js基本上每个月都会发布一个新的版本  
   
   
   
   
 ，主要是增加一些新的功能 

 

 

 

 

 ，也可能废弃或更改某些API

 

 

 

 

 
，去three.js官网下载的three.js默认都是最新版本的          ，在实际开发过程中 
 

 
 

 
 

 
 

 
 

 ，three.js中的API的使用规则










，一切以你项目中的three.js版本对应的文档为准
 
 
 
 
 
。

Three.js的下载与使用

关注我的人都知道               ，在很早的之前我就说过 
 
 
 
 
 
 
 
 
 
 ，博主不可能会将所有的知识讲解全都面面俱到















，我个人仅仅是对知识的一个抛砖引玉而言          ，算是一个引路人 
 
  
 
  
 
  
 
  
 
  ，要想了解更加具体的知识









，还是推荐大家详细看看 three.js官方文档 的讲解  
   
   
   
   
 。如果你想查看three.js的所有版本文档 推荐网址
  
  
  
  
  
，里面详细介绍了每个版本新添加的功能以及相关的使用方法 
  
  
  
  
 ，下载的话滑到当前版本的最下面 


 


 


 


 


 ，点击下面的zip进行解压缩下载即可：

在项目中引入three.js的话
 
 
 
 
 
，比如说你采用的是Vue+threejs或React+threejs技术栈  
   
   
   
   
 ，这很简单啊threejs就是一个js库 

 

 

 

 

 ，直接通过npm命令行安装就行

 

 

 

 

 
， 注意：使用哪个版本的threejs          ，查文档就查对应的版本 

 

 

 

 

 。安装方式可参考官方文档 
 

 
 

 
 

 
 

 
 

 ，如下：

如果你是正式项目的话一定是选择npm安装而不是使用CDN










，官方虽然推荐我们使用webpack               ，但是我个人还是选择使用vite来使用 
 
 
 
 
 
 
 
 
 
 ，因为其打包的速度更快效率高一点















，不过这个还是看个人选择          ，接下来我将使用vite来创建react项目 
 
  
 
  
 
  
 
  
 
  ，不知道如何使用vite来创建项目的可以参考我之间写的文章：超详细教程——vite脚手架的搭建与使用 

 

 

 

 

 
。

入门three.js的第一步就是认识场景Scene
  
  
  
  
  、相机Camera  
  
  
  
  
 、渲染器Renderer三个基本概念

三维场景Scene：理解为虚拟的3D场景









，用来表示模拟生活中的真实三维场景或三维世界

透视相机Camera：模拟人眼所看到的景象
  
  
  
  
  
，是3D场景的渲染中使用得最普遍的投影模式          。

渲染器Renderer：用WebGL渲染出精心制作的场景 
 

 
 

 
 

 
 

 
 

 。

空间实现3d立方体旋转

接下来实现个小Demo 
  
  
  
  
 ，我使用的是React+Vite 


 


 


 


 


 ，代码如下：

import * as THREE from three; // 1.创建场景 const scene = new THREE.Scene(); // 2.创建相机 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) // 3.添加物体  
   
   
   
   
 ，创建几何体 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) // 4.初始化渲染器 const renderer = new THREE.WebGLRenderer() // 设置渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight) // 将webgl渲染的canvas内容添加到body上 document.body.appendChild(renderer.domElement) // 使用渲染器 

 

 

 

 

 ，通过相机将场景渲染出来 export const result = renderer.render(scene,camera) import { result } from "./three/three1" import ./App.css const App = () => { return ( <div className="container"> {result} </div> ) } export default App

因为React的渲染机制

 

 

 

 

 
，不建议将three.js代码直接写在函数式组件中          ，而是要单独封装在一个js文件中 
 

 
 

 
 

 
 

 
 

 ，通过按需导入导出即可










，结果如下：

接下来我们需要导入 轨道控制器               ，目的是通过控制器查看3d物体










。就相当于拿着我们定义好的相机 
 
 
 
 
 
 
 
 
 
 ，围绕着我们定义的物体360度旋转的去观看















，如下：

import * as THREE from three; // 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls // 1.创建场景 const scene = new THREE.Scene(); // 2.创建相机 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) // 3.添加物体 
 
  
 
  
 
  
 
  
 
  ，创建几何体 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) // 4.初始化渲染器 const renderer = new THREE.WebGLRenderer() // 设置渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight) // 将webgl渲染的canvas内容添加到body上 document.body.appendChild(renderer.domElement) // // 使用渲染器









，通过相机将场景渲染出来 // export const result = renderer.render(scene,camera) // 创建轨道控制器 new OrbitControls(camera,renderer.domElement) export function render(){ renderer.render(scene,camera) // 接下来渲染下一帧的时候就会调用render函数 requestAnimationFrame(render) } // 先开始就渲染一下 render()

在App中调用我们导出的这个render函数
  
  
  
  
  
，如下：

接下来可以给这个立方体添加坐标轴辅助线 
  
  
  
  
 ，让其可以更具体的展示给我们 


 


 


 


 


 ，设置辅助线的话可以参考一下官网给我们提供的函数：AxesHelper                。

空间实现3d立方体移动

承接上文立方体的样式
 
 
 
 
 
，接下来实现3d立方体的移动  
   
   
   
   
 ，实现移动的话可以使用position的set方法 

 

 

 

 

 ，来改变空间物体的向量值

 

 

 

 

 
，如下：

当然我们也可以在每次渲染其函数的地方          ，设置一下每次渲染加一点位置 
 

 
 

 
 

 
 

 
 

 ，超过一定距离从零开始










，这样也能实现一下立方体移动的效果               ，如下：

空间实现3d立方体缩放与旋转

实现物体的缩放与旋转可以通过操作 
 
 
 
 
 
 
 
 
 
 ，然后 .set 进行设置数值















，如下：

空间实现3d立方体地面以及阴影效果

实现生成平面几何的类的方法如下：

给出代码如下：

首先我们先设置光源          ，然后设置阴影效果并将其加到场景当中 
 
  
 
  
 
  
 
  
 
  ，如下：

本篇文章算是three.js的启蒙篇









，对于基础不是很好的人可能看的比较吃力
  
  
  
  
  
，后面我尽量每个案例都写的详细一点 
  
  
  
  
 ，希望大家都能看懂学会 


 


 


 


 


 ，每次写完后
 
 
 
 
 
，我都会将文章写的three.js代码都共享出来  
   
   
   
   
 ，欢迎大家学习！如果大家觉得不错的话 

 

 

 

 

 ，可以给博主一键三联

 

 

 

 

 
，您的支持就是博主创作的最大动力 
 
 
 
 
 
 
 
 
 
 。

import * as THREE from three; // 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls // 1.创建场景 const scene = new THREE.Scene(); // 2.创建相机 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) // 3.添加物体 
 

 
 

 
 

 
 

 
 

 ，创建几何体 const cubeGeometry = new THREE.BoxGeometry(1,1,1) // 设置几何体大小 const cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000}) // 设置几何体材质 // 根据几何体和材质创建物体 const cube = new THREE.Mesh(cubeGeometry,cubeMaterial) // 修改物体的位置 // cube.position.set(5,0,0) cube.position.y = 1.5 // 实现物体的缩放 cube.scale.set(3,2,1) // x
 
 

 
 

 
 

 
 

 
 

、y









、z轴的缩放倍数 // Math.PI是180度










，rotation也是以x                、y 
 
 
 
 
 
 
 
 
 
、z进行设置 cube.rotation.set(Math.PI / 4,0,0,"XYZ") cube.castShadow = true // 将几何体添加到场景之中 scene.add(cube) // 4.初始化渲染器 const renderer = new THREE.WebGLRenderer() // 设置渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight) // 渲染阴影 renderer.shadowMap.enabled = true // 将webgl渲染的canvas内容添加到body上 document.body.appendChild(renderer.domElement) // // 使用渲染器               ，通过相机将场景渲染出来 // export const result = renderer.render(scene,camera) // 创建地面网格参照 const planeGeometry = new THREE.PlaneGeometry(30,30) // 平面几何的宽高 const PlaneMateial = new THREE.MeshLambertMaterial({color:0xF8F8FF}) // 几何平面的颜色 const plane = new THREE.Mesh(planeGeometry,PlaneMateial) plane.rotation.x = -0.5*Math.PI plane.position.set(0,0,0) plane.receiveShadow = true scene.add(plane) // 设置光源投影 const ambienLight = new THREE.AmbientLight(0xAAAAA) scene.add(ambienLight) // 设置光源 const spotLight = new THREE.SpotLight(0xFFFFFF) // 设置聚光灯 spotLight.position.set(-60,40,-65) spotLight.castShadow = true //让聚光灯产生阴影 // 下面三行代码设置阴影效果 spotLight.shadow.mapSize = new THREE.Vector2(1024,1024) spotLight.shadow.camera.far = 130 spotLight.shadow.camera.near = 40 // 将阴影添加到场景中 scene.add(spotLight) // 创建轨道控制器 new OrbitControls(camera,renderer.domElement) // 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper(5) // 数值代表线的长度 scene.add(axesHelper) // 添加到场景之中 export function render(){ cube.position.x +=0.01 cube.rotation.x +=0.01 if(cube.position.x>5){ cube.position.x = 0 } renderer.render(scene,camera) // 接下来渲染下一帧的时候就会调用render函数 requestAnimationFrame(render) } // 先开始就渲染一下 render()