three.js 基础认识与简单应用

three.js 基础认识与简单应用

学习总结初衷: 

        1. 公司项目需要。

        2. 做一下笔记,方便以后学习查看,好记性不如烂笔头;也能筑固基础,加深印象。

        3. 现在国内关于three.js的学习资料很少,总结一下多多少少也能给有需要的小伙伴一些帮助。

一、前言

1. 什么是three.js?你将它理解成three+js,three表示3D的意思,js表示JavaScript的意思,合起来,three.js就是使用JavaScript来写3D程序的意思。three.js是基于WebGL的一个运行在浏览器上的开源框架,使得WebGL的使用更方便、快捷,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。
2. three.js是基于webGL封装的库,保留了webGL的灵活性,开源免费,可以满足大部分的3D需求。

二、学习参考资料

官网:Three.js – JavaScript 3D Library

官网中文文档(通过 方式本地搭建three.js官网): three.js docs

 学习推荐:

郭隆邦_技术博客:WebGL

webGL中文网:WebGL中文网

三、本地搭建three.js官网

 第一步:进入官网  Three.js – JavaScript 3D Library

 第二步:点击code中的github

 第三步:dev分支---- code中Download ZIP

 第四步:vscode编辑器打开---- npm install  下载依赖包、打开package.json查看运行方式(这里是 npm start 如图)

 第五步:打开上方运行出的https地址可以查看到:

three.js-dev目录结构示意图: 

 第六步:点击 three.js-dev目录 中的 docs 文件夹

四、three.js安装引入

 以下的例子都是按照npm的方式安装的 

五、基础知识

1、右手坐标系
        three.js中使用的都是右手坐标系,即图示右手大拇指指向x轴正向,食指指向y轴正向,中指指向z轴正向,这样的一个三维坐标系。具体来说,x,y坐标用于控制浏览器平面,如果不改变z坐标则物体只在浏览器平面上运动,因此z坐标控制的就是远近

 

 2、整个程序解构:

  程序整个运行过程就是:场景 —— 相机 —— 渲染器

六、three.js核心组成 

1、场景(se***e)  

/*
 *1. 创建场景  -- 放置物体对象的环境
 */
const scene = new THREE.Scene();

2、相机(camera)

(1)、创建透视相机,也称投影相机(PerspectiveCamera)-- 用来模拟人眼所看到的景象

/*
 * 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
 */
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 进截面
  1000 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中

分析: 

const camera = new THREE.PerspectiveCamera(

        fov : Number,

        aspect : Number,

        near : Number,

        far : Number

)


fov — 摄像机视锥体垂直视野角度 (相机的拍摄视角大小)
aspect — 摄像机视锥体长宽比 (相机拍摄区域的长宽比)
near — 摄像机视锥体近端面 (相机拍摄范围近端距离)
far — 摄像机视锥体远端面 (相机拍摄范围远端距离)
常用:const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


效果:相机拍摄的画面具有近大远小的特性,距离相机的物体显示的,距离相机的物体显示的

ps: 在 Three 中是没有「长度单位」这个概念的,它的数值都是根据比例计算得出,因此这里提到的 0.1 或 1000 都没有具体的含义,而是一种相对长度。 

 

可以看到,通过配置透视相机的相关参数,最终被渲染到屏幕上的,是在 near 到 far 之间,根据 fov 的值物体远近确定渲染高度,再通过 aspect 值来确定渲染宽度的。

或者更直观一点显示:

如图中所示,透视投影相机一共有4个参数:fov(视场,一个角度值), Horizonta Field of View(横向视场),Vertical Field of View(纵向视场),Near plane(近面), Far plane(远面);由这几个因素,构成一个六面体的封闭空间,在这个空间内的一切物体可见。在设置参数时,需满足:

横向视场 / 纵向视场 = 浏览器窗口的宽/浏览器窗口的高。

(2)、创建正交相机

const camera = new THREE.Orthographi***amera(

        left : Number,

        right : Number,

        top : Number,

        bottom : Number,

        near : Number,

        far : Number

)
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面 (表示近平面与相机中心点的垂直距离)。
far — 摄像机视锥体远端面 (表示远平面与相机中心点的垂直距离)。

效果:相机拍摄的画面是相机对物体的正投影,无论物体远近都不会影响它在相机画面中的大小。


各参数如图所示:

 

 分析与ps:

1、由图可知正交透视相机总共有6个面,其具备的特点是:场景中远处的物体和近处的物体是一样大的,它并不像我们现实生活中看场景那样,远小近大,而是远近皆一样大;6个面分别为left(左面),right(右面),top(顶面),bottom(底面),near(近面),near(远面),这六个面组成一个封闭的矩形空间,在这个空间内的一切物体都可见。在设置其参数的时候,下面的关系式一定要成立:

left right = 1,top / buttom | = 1

2、由图可见near与far的值应为正值,且far>near。如果最后两个值是(0,0),也就是near和far值相同了,视景体深度没有了,整个视景体都被压成个平面了,就会显示不正确。

将摄像机聚焦在指定点

注意: 默认相机的位置在(0,0,0)点处,即场景中心,如果物体也在该点则拍摄不到,所以我们要适当调整相机的位置

使用camera.position.set(x, y, z)来设置摄像机的位置。

使用camera.lookAt(new THREE.Vector3(x, y, z))来改变摄像机的指向位置。        

        例如,指向场景中心:camera.lookAt(scene.position)

总结:

透视相机(PerspectiveCamera):近大远小
正交相机(Orthographi***amera):远近一致 

 

 3、渲染器(render)

        有了场景相机,我们还需要渲染器把对应的场景用对应的相机可见渲染出来,因此渲染器需要传入场景和相机参数。 

/*
 *  3.初始化渲染器-设置渲染器大小及挂载元素
 */
const renderer = new THREE.WebGL1Renderer();

// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 清除颜色,第二个参数为 0 表示完全透明,适用于需要透出背景的场景
// renderer.setClearColor(0x000000, 0);

// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器,通过相机将场景渲染出来
renderer.render(scene, camera);

const renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );
实例化一个渲染器,然后将它的dom元素插入到body中,即插入了一个canvas。


也可以将其插入到其他元素中,比如html中有一个<div id='canvas'></div>,就可以写成
document.getElementById('canvas').appendChild( renderer.domElement );这样场景就在这个div中加载了。


注意:设置渲染器的大小,常用的为renderer.setSize( window.innerWidth, window.innerHeight );,如果不设就是默认大小

现在 场景、相机、渲染器都有了,就差需要展示的对象了,下面就来介绍一下物体(几何体)对象

4、物体对象  -- 包含 几何体(Geometry)、材质(Material)、网格对象(Mesh)

/*
 *  添加物体
 */
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); // 创建几何体对象 -- 立方体
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); //创建网格,网格=对象+材质
scene.add(cube); // 将物体添加到场景中

几何体(Geometry)

         Three 提供了多种类型的几何体,可以分为二维网格和三维网格。二维网格顾名思义只有两个维度,可以通过这种几何体创建简单的二维平面;三维网格允许你定义三维物体;在 Three 中定义一个几何体十分简单,只需要选择需要的几何体并传入相应参数创建即可。常用几何体如下:

        更多几何体及相关用法请见官网: 官网:Three.js – JavaScript 3D Library

        三维:

构造函数 说明
THREE.BoxGeometry 立方几何体
THREE.SphereGeometry 球几何体
HREE.ConeGeometry 圆锥几何体
HREE.CylinderGeometry 圆柱几何体
HREE.TorusGeometry 圆环几何体
HREE.TextGeometry 文本几何体

        二维:

材质(Material)

        定义材质可以帮助我们决定一个物体在各种环境情况下的具体表现。同样 Three 也提供了多种材质。下面列举几个常用的材质。

        更多材质及相关用法请见官网: 官网:Three.js – JavaScript 3D Library

        创建材质:

const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x666666 });
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 });
const wireMaterial = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x666666 });

网格对象(Mesh)

         需要将几何体和材质添加到场景中,还需要依赖 Mesh。Mesh 是用来定义材质和几何体之间是如何粘合的。

或者说 3d物体由点->线->面组成,mesh网格就是由大量的面组成的网格图,再加上材质就创建成物体,新建几何体和材质后,就可以将该物体对象添加到场景中了。

创建网格对象可以应用一个或多个材质和几何体。

网格 = 几何体 + 材质

创建几何体相同材质不同的网格对象:

const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
const cubePhong = new THREE.Mesh(cubeGeometry, phongMaterial);
scene.add(cube, cubePhong);

创建材质相同几何体不同的网格对象:

const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
const sphere = new THREE.Mesh(sphereGeometry, basicMaterial);
scene.add(cube, sphere);

 创建拥有多个材质几何体的网格对象:

const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 });
const cubeMeshPhong = new THREE.Mesh(cubeGeometry, cubePhongMaterial);
const cubeMeshWire = new THREE.Mesh(cubeGeometry, wireMaterial);
// 网格对象新增材质
cubeMeshPhong.add(cubeMeshWire);
scene.add(cubeMeshPhong);

有了场景、相机和渲染器,再加上物体,我们已经可以看到初步的效果了。但3D世界里,静止的物体多无趣啊。于是我们尝试加入动画效果.。

5、帧循环,游戏循环: 

// 定义循环渲染方法
function render() {
  // 物体动态移动位置 -- 沿x轴
  cube.position.x += 0.01;
  if (cube.position.x > 7) {
    cube.position.x = 0;
  }
  // 物体动态旋转
  cube.rotateX(0.01); //每次绕y轴旋转0.01弧度
  // cube.rotation.x += 0.01;

  renderer.render(scene, camera); // 执行渲染操作
  requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();

6、灯光

1、灯光用来为场景添加光源,照明物体,虽然部分材质(如MeshBasicMaterial)不会受到灯光的影响,无需添加灯光也能看见,但是这种材质的物体没有质感,也没有明暗变化;如果想让物体更接近真实场景的物体,就需要可以被灯光影响的材质,如MeshLamberMaterial,如果不添加光源就无法看到物体。


2、灯光分为点光源线光源面光源等,可依据实际场景进行选择,正如真实场景的光源情况,three.js允许添加多个灯光从而对真实场景进行模拟。


添加灯光方法:
const light = new THREE.AmbientLight( 0x404040 ); 
scene.add( light );

7、辅助线

// 三维辅助线(长度)-- 三维坐标系
const axisHelper = new THREE.AxisHelper(7);
scene.add(axisHelper);
 
// 网格辅助线 -- 地表格(网格宽度、等分数、中心线颜色,网格线颜色)
const grid = new THREE.GridHelper(1000, 1000, 0xff0000, 0xff0000);
scene.add(grid);

8、轨道控制器查看物体(鼠标控制)

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

/**
 * 创建轨道控制器(OrbitControls)
 * 可以使得相机围绕目标进行轨道运动
 */
const controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true; // 相机是否自动旋转
controls.autoRotateSpeed = 3; // 自转速度
// 设置控制器阻尼,让控制器更有真实效果,必须在动画循环render()中调用controls.update()()
controls.enableDamping = true;

 PS:设置控制器阻尼,必须在动画循环render()中调用controls.update()()

// 定义循环渲染方法
function render() {
  // 动态移动位置
  cube.position.x += 0.01;
  if (cube.position.x > 7) {
    cube.position.x = 0;
  }
  //动态旋转
  cube.rotateX(0.01); //每次绕y轴旋转0.01弧度
  // cube.rotation.x += 0.01;

  renderer.render(scene, camera); // 执行渲染操作

  controls.update(); // controls控制特定属性时加

  requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();

能把上面的看完,基本上自己就可以实现3d效果了, 那下面就简单给出几个例子帮助理解一下!

七、拓展

  •  根据尺寸变化实现自适应画面

// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
  // console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

示例一:通过script标签来引入three.js比较简单,适合简单的练习,快速体验。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>My First three.js app</title>
        <script src="js/three.min.js"></script>
  <style>
   body{margin:0;}
  </style>
 </head>
 <body>
 <script>
  // 场景
  const scene = new THREE.Scene();
 
  // 相机
  const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,000);
 
  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);
 
  // 物体
  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);
 
  camera.position.z = 5;

  // 动画
  const animate = function(){
   requestAnimationFrame(animate);
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
   renderer.render(scene,camera);  //渲染
  };
  animate();
 </script>
 </body>
</html>

 这是一张静态图片,动态效果自己运行一下就能出现啦!  

示例二:通过script标签和CDN来引入three.min.js,实现一个旋转的球:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My First three.js app2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src='https://cdn.bootcss.***/three.js/91/three.min.js'></script>
</head>

<body>
    <script>
        //创建场景
        const scene = new THREE.Scene();
        //创建透视投影相机,视角45度,画幅比例 宽比高,近平面距离0.1,远平面1000
        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        //创建渲染器
        const renderer = new THREE.WebGLRenderer();
        //渲染器canvas宽高设为与窗口一致
        renderer.setSize(window.innerWidth, window.innerHeight);
        //将渲染器对应的dom元素添加到body中
        document.body.appendChild(renderer.domElement);
        //定义一个几何体
        const geometry = new THREE.SphereGeometry(3, 30, 30);
        //定义一种材质,显示为线框
        const material = new THREE.MeshBasicMaterial({ color: 0xB3DD, wireframe: true });
        //网孔(Mesh)是用来承载几何模型的一个对象,可以把材料应用到它上面
        const ball = new THREE.Mesh(geometry, material);
        //把几何模型添加到场景中,对象被添加到原点(0,0,0)坐标。
        scene.add(ball);
        //移动相机位置
        camera.position.z = 8;
        function render() {
            //渲染循环,以每秒60次的频率来绘制场景
            requestAnimationFrame(render);
            //设置球体绕y轴旋转
            ball.rotation.y += 0.005;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

</html>

 这是一张静态图片,动态效果自己运行一下就能出现啦! 

示例三、通过npman安装,在vue2项目中使用:

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 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中

/*
* 添加物体
*/
// 创建几何体对象
const cubeGeometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
// 设置材质
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 网格 = 对象 + 材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube); // 将物体添加到场景中

// 修改物体的位置(想实现动态的移动就定义在render()方法中)
// cube.position.set(7, 0, 0);
// 或者
// cube.position.x = 7;

// 缩放
// cube.scale.set(3, 2, 1);
// 或者
// cube.scale.x = 3;

// 旋转(参数有4个,前面是xyz,第四个可以控制旋转的顺序)--想实现动态的旋转就定义在render()方法中
// cube.rotation.set(Math.PI / 4, 0, 0, "XZY");
// 或者
// cube.rotateX(Math.PI / 4);
// 或者
cube.rotation.x = Math.PI / 4;

/**
* 3.初始化渲染器
*/
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器,通过相机将场景渲染出来
// renderer.render(scene, camera);

/**
* 创建轨道控制器(OrbitControls)
* 可以使得相机围绕目标进行轨道运动
*/
const controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = true; // 相机是否自动旋转
controls.autoRotateSpeed = 3; // 自转速度

/**
* 辅助三维坐标系
* 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
*/
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);

// 定义循环渲染方法
function render() {
// 动态移动位置
cube.position.x += 0.01;
if (cube.position.x > 7) {
cube.position.x = 0;
}
//动态旋转
cube.rotateX(0.01); //每次绕y轴旋转0.01弧度
// cube.rotation.x += 0.01;

renderer.render(scene, camera); // 执行渲染操作
controls.update(); // controls控制特定属性时加
requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();

// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {
  // console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

 这是一张静态图片,动态效果自己运行一下就能出现啦! 

Thanks !!!

 纹理贴图快速通道:three.js 纹理贴图的使用

转载请说明出处内容投诉
CSS教程_站长资源网 » three.js 基础认识与简单应用

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买