WebGL - Three.js 分享

演讲者：齐俊鑫

教学大纲

  1. WebGL与Three.js

  2. 3D图形基础知识

    • 3D坐标系
    • 网格、材质、纹理
    • 相机
    • 着色器

  3. Three.js实践

    • 渲染器 renderer
    • 场景 scene
    • 相机 camera
    • 光源 light
    • 网格 mesh
    • 渲染 render

  4. 3D动画

    • RequestAnimationFrame()
    • 补间动画
    • CSS3D动画 Animation
    • 基于着色器的动画

WebGL与Three.js

  • OpenGL 是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。

  • WebGL 是Javascript的API，是一种网络标准，定义了一些较底层的图形接口，可以看做是将OpenGL移植到了网页平台的web规范

  • Three.js

3D图形基础知识

3D坐标系

3D图形基础知识

网格、材质、纹理

网格 mesh -> 模型

几何体 geometry 用来勾勒出形状，保存了顶点位置信息

材质 material 描述外观，包括色彩、反射、明暗等属性

纹理 使用一个或者多个位图来表示外观信息

加纹理

3D图形基础知识

相机

相机定义了用户相对于场景的位置和朝向

视野fov，近剪裁平面(视口)，远剪裁平面，视见体
切换

3D图形基础知识

着色器 Shader

又称为“可编程着色器”，是一段源代码，实现了将网格像素点投影到屏幕上的算法

可以处理材质、光源、变换以及相机

Vertex Shader顶点着色器 和 Pixel Shader像素着色器

Three.js实践

  • 渲染器 renderer
  • 场景 scene
  • 相机 camera
  • 光源 light
  • 网格 mesh
  • 渲染 render

创建渲染器renderer


    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(container.offsetWidth,container.offsetHeight);
    container.appendChild(renderer.domElement);

CanvasRenderer 、 CSS3DRenderer 、 SVGRenderer ...

创建相机


    var aspect = container.offsetWidth/container.offsetHeight;
    camera = new THREE.PerspectiveCamera(45,aspect,1,1000);
    camera.position.z = 550;
    camera.lookAt(scene.position);
    scene.add(camera);

创建光源


    light = new THREE.DirectionalLight(0xf0f0f0);
    light.position.set(0,0,5);
    scene.add(light);

定向光 环境光 聚光灯 点光源

创建网格


    var geometry = new THREE.BoxGeometry(200,200,200);
    var texture = new THREE.TextureLoader().load('/image/texture.jpg');
    var material = new THREE.MeshLambertMaterial( {map:texture});
    cube = new THREE.Mesh( geometry, material);
    scene.add(cube);

MeshBasicMaterial 、 MeshLambertMaterial 、 MeshPhongMaterial

渲染


    renderer.render(scene,camera)

3D动画

  • RequestAnimationFrame()
  • 补间动画
  • CSS3D动画 Animation
  • 基于着色器的动画

RequestAnimationFrame()


    function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.y += 0.005;
        renderer.render( scene, camera );
    }

补间动画

补间指的是计算一对值中间插入的其它数值的过程。

由一个状态切换到另一个状态的一次性简单动画


    new TWEEN.Tween(group.position)
        .to( {x:2, y:2, z:-3}, duration1000 )
        .delay( delayTime1000 )
        .easing( TWEEN.Easing.Exponential.InOut )
        .repeat( repeatCount )
        .start();
    }
    TweenMax.to(group.position, 
        duration, 
        {y:0, ease:Strong.easeInOut, yoyo:true, repeat:repeatCount});
我要看例子！

Q&A