3D绘图

悠悠 2022-06-04 01:38 291阅读 0赞

#### **1.WebGL & Three.js** ####

1. WebGL是一个底层的标准，在这些标准被定义之后，Chrome、Firefox之类的浏览器实现了这些标准。
    2. Three.js封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。

这里写链接内容

#### **2.正交投影vs透视投影** ####

*  正交投影: 对于在三维空间内平行的线，投影到二维空间中也一定是平行的。对于制图、建模软件通常使用正交投影，这样不会因为投影而改变物体比例

var camera = THREE.OrthographicCamera(left, right, top, bottom, near, far)

这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置，这六个面围成一个长方体，我们称其为视景体（Frustum）

![这里写图片描述][SouthEast]  
这里写链接内容

*  透视投影:模拟人眼的观察效果，物体越远越小，用于网页制作3d效果。

var camera = THREE.PerspectiveCamera(fov, aspect, near, far)

1. fov是视景体竖直方向上的张角（是角度制而非弧度制）。
    2. aspect等于width / height，是照相机水平方向和竖直方向长度的比值，通常设为Canvas的横纵比例。
    3. near和far分别是照相机到视景体最近、最远的距离，均为正值，且far应大于near。

![这里写图片描述][SouthEast 1]  
这里写链接内容

#### **3.几何形状** ####

几何形状（Geometry）最主要的功能是储存了一个物体的顶点信息。WebGL需要程序员指定每个顶点的位置，而在Three.js中，可以通过指定一些特征来创建几何形状，例如使用半径创建一个球体，从而省去程序员一个个指定顶点的工作量。

##### **3.1立方体** #####

物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。

var cube =THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

##### **3.2平面** #####

这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面

var PlaneGeometry = THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

##### **3.3球体** #####

radius是半径；segmentsWidth表示经度上的切片数；segmentsHeight表示纬度上的切片数；
    phiStart表示经度开始的弧度；phiLength表示经度跨过的弧度；
    thetaStart表示纬度开始的弧度；thetaLength表示纬度跨过的弧度。

var SphereGeometry = THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)

这里写链接内容

##### **3.4圆形** #####

var circle = THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

##### **3.5圆柱** #####

radiusTop与radiusBottom分别是顶面和底面的半径，
    height是圆柱体的高度；radiusSegments与heightSegments可类比球体中的分段；
    openEnded是一个布尔值，表示是否没有顶面和底面，缺省值为false，表示有顶面和底面。

var CylinderGeometry = THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

这里写链接内容

##### **3.6正多面体** #####

THREE.TetrahedronGeometry(radius, detail)
    THREE.OctahedronGeometry(radius, detail)
    THREE.IcosahedronGeometry(radius, detail)

##### **3.7圆环** #####

var TorusGeometry = THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

这里写链接内容

##### **3.8文字形状** #####

size：字号大小，一般为大写字母的高度
    height：文字的厚度
    curveSegments：弧线分段数，使得文字的曲线更加光滑
    font：字体，默认是'helvetiker'，需对应引用的字体文件
    weight：值为'normal'或'bold'，表示是否加粗
    style：值为'normal'或'italics'，表示是否斜体
    bevelEnabled：布尔值，是否使用倒角，意为在边缘处斜切
    bevelThickness：倒角厚度
    bevelSize：倒角宽度

var textGeometry = THREE.TextGeometry(text, parameters)

这里写链接内容

##### **3.9自定义形状** #####

var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-1, 2, -1))
    geometry.faces.push(new THREE.Face3(0, 1, 3))

这里写链接内容

#### **4. 材质** ####

材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。

##### **4.1基本材质** #####

渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。
    1. visible：是否可见，默认为true
    2. side：渲染面片正面或是反面，默认为正面THREE.FrontSide，可设置为反面THREE.BackSide，或双面THREE.DoubleSide
    3. wireframe：是否渲染线而非面，默认为false
    4. color：十六进制RGB颜色，如红色表示为0xff0000

new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.75 });

##### **4.2Lambert材质** #####

Lambert材质（MeshLambertMaterial）是符合Lambert光照模型的材质。Lambert光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果。
    
    1.color是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性。除此之外，还可以用ambient和emissive控制材质的颜色。
    2.ambient表示对环境光的反射能力，只有当设置了AmbientLight后，该值才是有效的，材质对环境光的反射能力与环境光强相乘后得到材质实际表现的颜色。
    3.emissive是材质的自发光颜色，可以用来表现光源的颜色。

new THREE.MeshLambertMaterial({ emissive: 0xff0000 })

这里写链接内容

##### **4.3Lambert材质** #####

Phong材质（MeshPhongMaterial）是符合Phong光照模型的材质。和Lambert不同的是，Phong模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合。

new THREE.MeshPhongMaterial({ color: 0xffff00 });

这里写链接内容

##### **4.4法向材质** #####

材质的颜色与照相机与该物体的角度相关，改变照相机位置，物体的颜色会发生变化

new THREE.MeshNormalMaterial()

这里写链接内容

##### **4.5纹理材质** #####

使用图像作为材质。这时候，就需要导入图像作为纹理贴图，并添加到相应的材质中。

var texture = THREE.ImageUtils.loadTexture('../img/0.png');
    var material = new THREE.MeshLambertMaterial({
        map: texture
    });

这里写链接内容

#### **5. 网格** ####

网格的创建非常简单，只要把几何形状与材质传入其构造函数。最常用的物体是网格（Mesh），它代表包含点、线、面的几何体。

var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
    var geometry = new THREE.CubeGeometry(1, 2, 3);
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

这里写链接内容

#### **6.动画 requestAnimationFrame**  ####

在render()函数中不断的改变物体或者摄像机的位置，并渲染它们，就能够实现动画了

function animate() { 
        render();
        requestAnimationFrame( animate );
    }

使用动画引擎Tween.js来创建动画

这里写链接内容  
这里写链接内容

#### **7.性能测试 star.js**  ####

function init() { 
        stat = new Stats();
        stat.domElement.style.position = 'absolute';
        stat.domElement.style.right = '0px';
        stat.domElement.style.top = '0px';
        document.body.appendChild(stat.domElement);
    }
    function draw() { 
        stat.begin();
    
        mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
        renderer.render(scene, camera);
    
        stat.end();
    }

这里写链接内容

#### **8.光源模型**  ####

光源与阴影的创建和使用是十分方便的。在学会了如何控制光影的基本方法之后，如果能将其灵活应用，将能使场景的渲染效果更加丰富逼真

##### **8.1环境光** #####

环境光是指场景整体的光照效果，是由于场景内若干光源的多次反射形成的亮度一致的效果，通常用来为整个场景指定一个基础亮度

var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

这里写链接内容

##### **8.2点光源** #####

点光源是不计光源大小，可以看作一个点发出的光源。点光源照到不同物体表面的亮度是线性递减的，因此，离点光源距离越远的物体会显得越暗。

var light = new THREE.PointLight(0xffffff, 2, 100);
    light.position.set(0, 1.5, 2);
    scene.add(light);

这里写链接内容

##### **8.3平行光** #####

太阳光常常被看作平行光，这是因为相对地球上物体的尺度而言，太阳离我们的距离足够远。对于任意平行的平面，平行光照射的亮度都是相同的，而与平面所在位置无关。

var light = new THREE.DirectionalLight();
    light.position.set(2, 5, 3);
    scene.add(light);

这里写链接内容

##### **8.4聚光灯** #####

聚光灯是一种特殊的点光源，它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线，这与我们现实中看到的聚光灯是一致的

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                        new THREE.MeshLambertMaterial({color: 0x00ff00}));
    var light = new THREE.SpotLight(0xffff00, 1, 100, Math.PI / 6, 25);
    light.target = cube;

这里写链接内容

##### **8.5阴影** #####

在Three.js中，能形成阴影的光源只有THREE.DirectionalLight与THREE.SpotLight；而相对地，能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial。

renderer.shadowMapEnabled = true;

这里写链接内容

#### **9.外部模型**  ####

使用Three.js创建常见几何体是十分方便的，但是对于人或者动物这样非常复杂的模型使用几何体组合就非常麻烦了。因此，Three.js允许用户导入由3ds Max等工具制作的三维模型，并添加到场景中。

这里写链接内容

#### **10. 3D效果** ####

这里写链接内容  
这里写链接内容  
这里写链接内容

[SouthEast]: /images/20220604/8605493c8ce842a8b80f701f660aa99a.png
[SouthEast 1]: /images/20220604/564bef90d9594f2999f497a443c4786e.png