欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

three.js 入门 (1)

最编程 2024-04-14 15:17:13
...

image

1. 概述

1.1 什么是WebGL？

WebGL是在浏览器中实现三维效果的一套规范
  • 想要使用WebGL原生的API来写3D效果的话，很吃力。three.js是WebGL的一个开源框架，它省去了很多麻烦的细节。

1.2 初识three.js

什么是threejs，很简单，你将它理解成three+js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。
  • Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。

1.3 前期准备

1.3.1 下载地址

  • three.js 下载地址

1.3.2 目录结构

image

  • Build目录： 包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
  • Docs目录： 这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
  • Editor目录： 一个类似3D-max的简单编辑程序，它能创建一些三维物体。
  • Examples目录： 一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
  • Src目录： 源代码目录，里面是所有源代码。
  • Test目录： 一些测试代码，基本没用。
  • Utils目录： 存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
  • .gitignore文件： git工具的过滤规则文件，没有用。
  • CONTRIBUTING.md文件： 一个怎么报bug，怎么获得帮助的说明文档。
  • LICENSE文件： 版权信息。
  • README.md文件： 介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。

1.3.3 配置开发环境

  • 浏览器： 推荐使用高版本的浏览器，谷歌、火狐、360等，对于前端开发者来说，chrome是不二的选择
  • js 开发工具： VS-code、Webstorm 都可以，为了方便下面的学习，这里使用Webstorm
  • Three.js 调试： 利用谷歌浏览器的调试窗口，使用断点调试的方法

2. 开始使用Three.js

使用Three.js之前，首先在<head>部分，需要引入外部文件Three.js。
<head>
    <script type="text/javascript" src="three.js"></script></head>
WebGL 的渲染是需要HTML5 中的Canvas元素的，你可以手动在HTML的<body>部分中使用canvas标签，或者让Three.js帮你生成。这两种选择，一般没有多大差别。我们先手动定义一个canvas标签：
<body onload="init();">
    <canvas id="canvasId" width="800" height="600"></canvas></body>
在js里面定义一个函数，将所有执行的代码放在函数里，在html加载完成后，执行该函数
function init{    // 所有需要执行的代码}

一个典型的Three.js程序，至少应该包括四个部分：渲染器(renderer)、场景(scene)、相机(camera)、以及场景中创建的物体。

2.1 渲染器(renderer)

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

渲染器将会和canvas元素进行绑定，如果之前<html>标签中，定义了id为canvasId的canvas标签，那么renderer可以这样写：

var renderer = new THREE.WebGLRenderer({    canvas : document.getElementById('canvasId');
});
如果想要Three.js生成Canvas元素的时候，在html中就不需要在定义一个canvas标签了，直接在javascript代码中写道：
var renderer = new THREE.WebGLRenderer();
renderer.setSize = (800,600);document.body.appendChild(renderer.domElement);
  • 上面的代码setSize是为canvas元素设置宽高，document.body.appendChild(renderer.domElement)是将渲染器对应的Canvas元素添加到body中。
我们可以使用下面的代码(用于清除画面的颜色)将背景色设置为黑色：
renderer.setClearColor(0x000000);

2.2 场景(scene)

在Three.js中添加物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景里没有很复杂的操作，只要new一个对象就可以了，然后将物体添加到场景中即可。
var scene = new THREE.Scene();

2.3 照相机(camera)

在介绍照相机之前，我们先来介绍一下坐标系。
  • three.js中使用的是右手坐标系，X轴水平向右，y轴垂直向上，Z轴的方向就是屏幕由里往外的方向

image

这里我们定义一个透视相机(相机也需要添加到场景中)：
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);// 设置相机的位置camera.position.set(0,0,5);// 将相机添加到场景中scene.add(camera);

2.4 创建一个物体

这里我们先介绍一个长方体，创建一个x、y、z方向长度分别为1、2、3的长方体，并设置为红色。
var geometry = new THREE.CubeGeometry(1,2,3);var material = new THREE.MeshBasicMaterial({    color: 0xff0000;
});var cube = new THREE.Mesh(geometry,material);
scene.add(cube);

  • new THREE.CubeGeometry(); 表示调用一个几何体

    • Cube : 立方体 Geometry : 几何;
    • CubeGeometry是一个正方体或者长方体，究竟是什么，由它的3个参数所决定
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width：立方体x轴的长度

height：立方体y轴的长度

depth：立方体z轴的深度，也就是长度

想一想大家就明白，以上3个参数就能够确定一个立方体。

剩下的几个参数就要费解和复杂一些了，不过后面我们会自己来写一个立方体，到时候，你会更明白这些参数的意义，这里你可以将这些参数省略。

  • new THREE.MeshBasicMaterial(); 表示的是物体的材质

    • 你可以在里面设置物体的颜色
var material = new THREE.MeshBasicMaterial({    color: 0xff0000;
});
  • 一定不要忘了，将物体添加到场景

2.5 渲染

在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。这时候，我们只需要调用渲染器的渲染函数，就能使其渲染一次了。
renderer.render(scene, camera);

2.6 完整代码

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>长方体</title>
    <script src="three.js"></script></head><body onload="init();">
    <script>
        function init() {            // 渲染器
            var renderer = new THREE.WebGLRenderer();            // canvas元素设置宽高
            renderer.setSize = (800, 600);            // 渲染器对应的Canvas元素添加到<body>中。
            document.body.appendChild(renderer.domElement);            // 清除画面的颜色
            renderer.setClearColor(0x000000);            // 场景
            var scene = new THREE.Scene();            // 相机
            // 定义一个透视相机
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);            // 设定相机的位置
            camera.position.set(0, 0, 5);            // 将相机添加到场景中
            scene.add(camera);            // 物体
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), new THREE.MeshBasicMaterial({                color: 0xff0000
            }));
            scene.add(cube);            // 渲染
            renderer.render(scene, camera);
        }    </script></body></html>
  • 效果图

image
canvas元素的默认宽高为300/150

3. Three.js功能概览

下面介绍下Three.js官网文档中的一些重要的对象，在你需要寻求帮助时，就能够知道关键词是什么。

  • Cameras（照相机，控制投影方式）

    • Camera
    • OrthographicCamera
    • PerspectiveCamera

  • Core（核心对象）

    • BufferGeometry
    • Clock（用来记录时间）
    • EventDispatcher
    • Face3
    • Face4
    • Geometry
    • Object3D
    • Projector
    • Raycaster（计算鼠标拾取物体时很有用的对象）

  • Lights（光照）

    • Light
    • AmbientLight
    • AreaLight
    • DirectionalLight
    • HemisphereLight
    • PointLight
    • SpotLight

  • Loaders(加载器，用来加载特定文件)

    • Loader
    • BinaryLoader
    • GeometryLoader
    • ImageLoader
    • JSONLoader
    • LoadingMonitor
    • SceneLoader
    • TextureLoader

  • Materials(材质，控制物体的颜色、纹理等)

    • Material
    • LineBasicMaterial
    • LineDashedMaterial
    • MeshBasicMaterial
    • MeshDepthMaterial
    • MeshFaceMaterial
    • MeshLambertMaterial
    • MeshNormalMaterial
    • MeshPhongMaterial
    • ParticleBasicMaterial
    • ParticleCanvasMaterial
    • ParticleDOMMaterial
    • ShaderMaterial
    • SpriteMaterial

  • Math(和数学相关的对象)

    • Box2
    • Box3
    • Color
    • Frustum
    • Math
    • Matrix3
    • Matrix4
    • Plane
    • Quaternion
    • Ray
    • Sphere
    • Spline
    • Triangle
    • Vector2
    • Vector3
    • Vector4

  • Objects(物体)

    • Bone
    • Line
    • LOD
    • Mesh（网格，最常用的物体）
    • MorphAnimMesh
    • Particle
    • ParticleSystem
    • Ribbon
    • SkinnedMesh
    • Sprite

  • Renderers(渲染器，可以渲染到不同对象上)

    • CanvasRenderer
    • WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
    • WebGLRenderTarget
    • WebGLRenderTargetCube
    • WebGLShaders（着色器，在最后一章作介绍）

  • Renderers / Renderables

    • RenderableFace3
    • RenderableFace4
    • RenderableLine
    • RenderableObject
    • RenderableParticle
    • RenderableVertex

  • Scenes（场景）

    • Fog
    • FogExp2
    • Scene

  • Textures(纹理)

    • CompressedTexture
    • DataTexture
    • Texture

  • Extras

    • FontUtils
    • GeometryUtils
    • ImageUtils
    • SceneUtils

  • Extras / Animation

    • Animation
    • AnimationHandler
    • AnimationMorphTarget
    • KeyFrameAnimation

  • Extras / Cameras

    • CombinedCamera
    • CubeCamera

  • Extras / Core

    • Curve
    • CurvePath
    • Gyroscope
    • Path
    • Shape

  • Extras / Geometries（几何形状）

    • CircleGeometry
    • ConvexGeometry
    • CubeGeometry
    • CylinderGeometry
    • ExtrudeGeometry
    • IcosahedronGeometry
    • LatheGeometry
    • OctahedronGeometry
    • ParametricGeometry
    • PlaneGeometry
    • PolyhedronGeometry
    • ShapeGeometry
    • SphereGeometry
    • TetrahedronGeometry
    • TextGeometry
    • TorusGeometry
    • TorusKnotGeometry
    • TubeGeometry

  • Extras / Helpers

    • ArrowHelper
    • AxisHelper
    • CameraHelper
    • DirectionalLightHelper
    • HemisphereLightHelper
    • PointLightHelper
    • SpotLightHelper

  • Extras / Objects

    • ImmediateRenderObject
    • LensFlare
    • MorphBlendMesh

  • Extras / Renderers / Plugins

    • DepthPassPlugin
    • LensFlarePlugin
    • ShadowMapPlugin
    • SpritePlugin

  • Extras / Shaders

    • ShaderFlares
    • ShaderSprite

我们看到，Three.js功能是十分丰富的，一时间想全部掌握有些困难。在接下来的章节中，我们将会先详细介绍照相机、几何形状、材质、物体等入门级知识；然后介绍使用动画、模型导入、加入光照等功能；最后，对于学有余力的读者，我们将介绍着色器，用于更高级的图形渲染。

4. 照相机

本章将介绍照相机的概念，以及如何使用Three.js设置相应的参数。

4.1 什么是照相机？

在图形学中，照相机可没有生活中的照相机那么简单
  • 我们使用的Three.js创建的场景是三维的，而通常情况下显示器是二维的，那么三维的场景怎么在二维的显示器上显示呢？照相机就是一个抽象，它定义了三维空间到二维屏幕投影的方式，用“照相机”这样一个类比，可以使我们直观地理解这一投影方式。
  • 而针对投影方式的不同，照相机又分为正交投影照相机与透视投影照相机。我们需要为自己的程序选择合适的照相机。这两者分别是什么，以及两者有何差异，我们将在下节中作介绍。

4.2 正交投影和透视投影

举个简单的例子来说明正交投影与透视投影照相机的区别。使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果（如下图中的(a)）；而使用正交投影照相机获得的结果就像我们在数学几何学课上老师教我们画的效果，对于三维空间内平行的线，投影到二维空间中也一定是平行的（如下图中的(b)）。

image

一般说来，对于制图、建模软通常使正交投影，这样不会因为投影而改变物体比例；而对于其他大多数应用，通常使用 透视投影，因为这更接近人眼的观察效果。当然，照相机的选择并没有对错之分，你可以更具应用的特性，选择一个效果更佳的照相机。

4.3 正交投影照相机

4.3.1 参数介绍

上一篇： 慢速解释：用于计算机视觉视频理解的双模态 CNN

下一篇： 将蛋白质语言模型扩展到千亿级参数，深入解读百多力和清华 xTrimoPGLM 模型

推荐阅读