这是一个web 3D的项目，主要实现了汽车3D模型外观、内饰展示，实现开关车门、汽车开动动画。

项目预览地址： 普拉多全景展示

手机预览地址：

项目过程

研究three.js和webgl有一段时间了，踩过各种坑，也尝试多种方法解决问题，实现了基本功能。主要涉及功能：
1、舞台场景搭建；
2、添加光照（环境光、点光源、炫光）
3、相机控制 (角度控制、位置)
4、场景点击事件
5、模型加载(fbx、obj以及obj转js)
6、纹理贴图、法线贴图、凹凸贴图，以及环境贴图
7、材质（玻璃材质、纹理材质）
8、着色器材质（glsl）
9、动画（fbx动画、轮胎动画、相机动画、tween.js）

项目待优化

1、项目整体设计感
2、交互流畅度
3、材质渲染，增加整体质感

其实使用着色器，就是给物体设置一种特殊的材质，这个材质是由着色器来决定显示效果。

下面以实际代码来展示不同材质的效果。

基本材质

function init () {
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('main')
    })
    const width = window.innerWidth
    const height = window.innerHeight
    renderer.setClearColor(0xffffff)            
    renderer.setSize(width, height)

    // 创建场景
    const scene = new THREE.Scene()

    // 原点
    const origin = new THREE.Vector3(0, 0, 0)

    // 创建照相机
    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
    camera.position.set(0, 10, 10)
    camera.lookAt(origin)
    scene.add(camera)

    // 创建光源
    const light = new THREE.DirectionalLight(0xffffff, 0.8)
    light.position.set(0, 10, 10)
    scene.add(light)

    // 创建基本材质的球体
    const baseSphere = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 20),
        new THREE.MeshBasicMaterial({
            color: 0xff0000
        })
    )
    scene.add(baseSphere)

    renderer.render(scene, camera)
}

init()

代码很简单，渲染出了一个基本材质MeshBasicMaterial的球体。

Lambert材质

同样增加一个球体，其他参数相同仅仅是材质不同。

// 创建 Lambert 材质球体
const lambertSphere = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 20),
                                     new THREE.MeshLambertMaterial({
    color: 0xff0000
})
                                    )
// 将该球体放置在基本材质球体的左边
lambertSphere.position.set(-3, 0, 0)
scene.add(lambertSphere)

在基本材质的左边可以看到一个新的小球，这就是 Lambert 材质的小球。

Phong材质

// 创建 Phong材质 材质球体
const phongSphere = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 20),
                                   new THREE.MeshPhongMaterial({
    color: 0xff0000
})
                                  )
phongSphere.position.set(3, 0, 0)
scene.add(phongSphere)

除了上面三种外，还可以贴图。下面就开始进入正题，着色器，或者说着色器材质？

着色器

着色器分为顶点着色器与片元着色器，这里也不具体介绍，因为导师的书籍和博客都已经介绍得非常清楚了。

重点在这两句话：

• 顶点着色器就是每个顶点调用一次的程序。在顶点着色器中，可以访问到顶点的三维位置、颜色、法向量等信息。可以通过修改这些值，或者将其传递到片元着色器中，实现特定的渲染效果。
• 片元着色器就是每个片元调用一次的程序。在片元着色器中，可以访问到片元在二维屏幕上的坐标、深度信息、颜色等信息。通过改变这些值，可以实现特定的渲染效果。

OK，话不多说，再新建一个小球，这次先不设置材质，看看会怎么样。

// 没有材质的球体
const shaderSphere = new THREE.Mesh(new THREE.SphereGeometry(1, 20, 20))
shaderSphere.position.set(0, 3, 0)
scene.add(shaderSphere)

而且刷新会有一个随机的颜色，因为似乎默认使用了基本材质？

使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。

接下来就来添加材质。

// 新建着色器材质
    var material = new THREE.ShaderMaterial({
        vertexShader: `
            uniform vec3 color;
            uniform vec3 light;

            varying vec3 vColor;
            varying vec3 vNormal;
            varying vec3 vLight;

            void main()
            {
                // pass to fs
                vColor = color;
                vNormal = normalize(normalMatrix * normal);

                vec4 viewLight = viewMatrix * vec4(light, 1.0);
                vLight = viewLight.xyz;

                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }`,
        fragmentShader: `
            varying vec3 vColor;
            varying vec3 vNormal;
            varying vec3 vLight;

            void main() {
                float diffuse = dot(normalize(vLight), vNormal);
                if (diffuse > 0.8) {
                    diffuse = 1.0;
                }
                else if (diffuse > 0.5) {
                    diffuse = 0.6;
                }
                else if (diffuse > 0.2) {
                    diffuse = 0.4;
                }
                else {
                    diffuse = 0.2;
                }

                gl_FragColor = vec4(vColor * diffuse, 1.0);
            }`,
        uniforms: {
            color: { 
                type: 'v3', // 指定变量类型为三维向量
                value: new THREE.Color('#ff0000') // 要传递给着色器的颜色值
            },
            light: {       
                type: 'v3',
                value: light.position // 光源位置
            }
        }
    })

这样就新建了一个材质，并且该材质的显示效果由vertexShader和fragmentShader两个着色器决定。

将该材质用在我们没有材质的小球上。

shaderSphere.material = material

再看看浏览器，发现和之前完全不同了。

可以看到上面的球体颜色有很明显的变化，上面颜色浅下面深，因为光是从顶上照射下来，所以有这种效果，如果改变光照方向，效果也不一样。

实现了需要的效果没有太大意义，更需要的是理解为什么会有这种效果。

顶点着色器

uniform vec3 color;
uniform vec3 light;

varying vec3 vColor;
varying vec3 vNormal;
varying vec3 vLight;

void main() {
    // pass to fs
    vColor = color;
    vNormal = normalize(normalMatrix * normal);

    vec4 viewLight = viewMatrix * vec4(light, 1.0);
    vLight = viewLight.xyz;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

一开始看的时候也完全不明白写的是什么，以学习另一种语言的心理再来看就慢慢能够理解了。

uniform和varying就是和 js 中的 var、let一样，用来声明变量的。所以这段代码一开始就声明了五个变量

• color
• light
• vColor
• vNormal
• vLight

使用uniform声明的变量将会从我们的 js 代码中传递过来，所以color就是#ff0000，light就是光源位置。

然后是main()函数，表示会执行这里面的代码，第一行vColor = color;很简单就是一个赋值操作。
接下来就复杂了。。。

vNormal = normalize(normalMatrix * normal);

虽然能知道是给vNormal变量赋值，但是normalize、normalMatrix和normal都是哪里来的？

回头看看之前说的重点，顶点着色器，也就是这段代码能够访问到顶点的三维位置、颜色、法向量等信息。normalMatrix和normal就是顶点信息，而normalize则是全局方法。

OK，现在知道变量是怎么来的，但是为啥要这么做呢？。。。。
竟无语凝噎，还是看导师的博客吧。

• 算法理解

总之，就是得到了 vNormal、vColor和vLight这三个变量并传递给片元着色器。

片元着色器

varying vec3 vColor;
varying vec3 vNormal;
varying vec3 vLight;

void main() {
    float diffuse = dot(normalize(vLight), vNormal);
    if (diffuse > 0.8) {
        diffuse = 1.0;
    }
    else if (diffuse > 0.5) {
        diffuse = 0.6;
    }
    else if (diffuse > 0.2) {
        diffuse = 0.4;
    }
    else {
        diffuse = 0.2;
    }

    gl_FragColor = vec4(vColor * diffuse, 1.0);
}

最为核心的代码就是main()函数中的第一句：

float diffuse = dot(normalize(vLight), vNormal);

调用normalize方法得到的结果，与vNormal作为参数再传入dot方法，最后得到的结果是片元的亮度值。

并且，将亮度值固定为1.0、0.6、0.4和0.2这四个值，所以，最终渲染出来的结果肯定只有四种颜色。

如果不将亮度值规定为四个值，而是直接使用，又是什么效果呢？

结果和预想的一样，diffuse是一个0 ~ 1的值，并且是逐渐变化的。

总结

物体的外观是由材质决定的，three.js 中有提供现成的材质，也可以自己使用着色器来自定义材质。

着色器分为顶点着色器与片元着色器，这两种着色器其实本质上就是以另一种语言实现的函数方法。由于是另一种语言所以也是有自己的变量声明规则以及全局方法，同时 three.js 也能够传递变量给着色器。

重点在于着色器中能够直接取到关于物体的顶点信息与片元信息，正是借助这些信息才能够定制显示效果。

参考

• 卡通渲染（上）

本文仅作webgl学习技术参考，点击阅读原文。

这是给一汽丰田做的用于朋友圈投放的H5，主题是”一键认证 关怀备至”。整个H5动效包含车辆出场动效、3D俯瞰、3D旋转动效、奖品展示跑马灯效果、车辆360度展示（精灵帧动画）、二维码光效动画。整体设计偏科技风。

核心技术点：

整个H5制作下来，有以下几个核心技术点：

1. 遵循腾讯广告投放的制作规范，控制整体文件包2M以内；
2. 使用Animate.css实现基本的过场动画；
3. 采用three.js进行obj模型和刻度图片加载，并进行纹理贴图，然后控制展示俯瞰图，以及过场动画；
4. 采用zepto.js中的swipe方法，控制模型左右转动；
5. 采用PS制作精灵图，实现普拉多线框车型360度展示；
6. 制作奖品展示跑马灯效果，采用setInterval进行精灵图切换；
7. 制作二维码覆盖层动效，采用pointer-events:none;属性实现图片覆盖二维码情况下，还能够长按识别二维码。

待优化的地方：

整个H5程序端制作花了2-3天制作时间，通过客户验收并上线。后期腾讯方反馈加载时间偏长，用户绑定偏少，广告投放单用户成本偏高。

程序方面以下几点思考：

1. 整个H5制作包1.9M，其中素材1M，three.js相关库文件600K左右。整体素材文件偏大，由于需要3D过渡场景和3D操作，3D库文件是必须的。

2. 由于等待时间和点击事件太多，用户触达留资页面花费时间太多，会造成用户过程中用户流失；

解决方案：

1. 资源素材再深度压缩；
2. 增加Loading页面，减少用户白屏等待时间；
3. 减少点击交互，多使用滑屏或者一屏滚动页面。

设计和制作效果预览：

一个完整的3D环境包含以下元素:

1.场景(Scene)：是物体、光源等元素的容器，
2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机
3.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子
4.光源（Light）：包括全局光、平行光、点光源
5.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。
6.控制器(Control): 相机控件，可通过键盘、鼠标控制相机的移动

场景(Scene)

物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲染出来。
一个3D项目中可同时存在多个scene，通过切换render的scene来切换显示场景

var scene = new THREE.Scene();
var mesh=scene.getObjectByName("sky");//获取场景中name=sky的物体；

相机（Camera）

相机根据投影方式分两种：正交投影相机和透视投影相机

正交投影相机:THREE.OrthographicCamera(left, right, top, bottom, near, far),大小不因远近而变化
透视投影相机:THREE.PerspectiveCamera(fov, aspect, near, far)，遵循近大远小的空间规则

一般情况下，我们使用的是透视投影相机，其参数为：

fov: 垂直方向夹角
aspect:可视区域长宽比 width/height
near:渲染区域离摄像机最近的距离
far:渲染区域离摄像机最远的距离，3仅在距离摄像机near和far间的区域会被渲染到 canvas中

相机有两个重要的参数：

camera.position：控制相机在整个3D环境中的位置（取值为3维坐标对象-THREE.Vector3(x,y,z)）
camera.lookAt：控制相机的焦点位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）

主要应用

1.设置相机焦点位置为原点坐标或某物体的位置坐标：camera.lookAt(new THREE.Vector3(0,0,0))，循环改变camera.position的位置，可以实现围绕物体旋转 360度观看物体的动画。

2.同时循环设置camera.lookAt和camera.position,可以实现以第一人称视角在空间自由移动的动画

物体（Mesh）

一个完整的物体对象mesh包括形状Geometry和材质Material

• Mesh：三维物体，包括Geometry、Material，设置其name属性可以通过scene.getObjectByName(name)获取该物体对象;
• Geometry：包括平面Plane、圆形Circle、立方体Cube、球体Sphere、圆柱Cylinder、多面体Polyhedron等，拥有以下属性：
• Material：包括基础材质MeshBasicMaterial，深度材质MeshDepthMaterial、法向材质MeshNormalMaterial、面材质MeshFacelMaterial、朗柏材质MeshLambertMaterial、phone材质MeshPhongMaterial、着色器材质ShaderMaterial

以下代码以创建name为sky一个立方体为例，使用6张图片作为材质贴到立方体内部

var path = "resource/sky/";
var format = '.jpg';
var urls = [
        path + 'px' + format, path + 'nx' + format,
        path + 'py' + format, path + 'ny' + format,
        path + 'pz' + format, path + 'nz' + format
    ];
var materials = []; 
for (var i = 0; i < urls.length; ++i) {
    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin( this.crossOrigin );
    var texture = loader.load( urls[i], function(){}, undefined, function(){} );
    materials.push(new THREE.MeshBasicMaterial({
        map: texture, 
        overdraw: true,
        side: THREE.BackSide,
        //transparent: true,
        //needsUpdate:true
    })
    ); 
} 
var cube = new THREE.Mesh(new THREE.CubeGeometry(9000,9000,9000), new THREE.MeshFaceMaterial(materials)); 
cube.name="sky";
scene.add(cube);

记住以下几点：

1. 物体mesh的大小是由构成三维物体形状的顶点坐标mesh.geometry.vertices和缩放级别mesh.scale(vector3)决定的,初始化创建物体时由传入的参数确定了形状顶点坐标mesh.geometry.vertices，后面需要修改物体大小使用mesh.scale进行缩放
2. 物体的透明度是材质的透明度属性mesh.material.opacity决定的，若需要设置透明度，需将材质的是否支持半透明属性mesh.material.transparent设置为true
3. 在页面运行期间需要改变物体的材质或属性需要同步设置mesh.material.needsUpdate=true
4. 若物体使用了THREE.MultiMaterial材质（如上面的例子如果多张图作为贴图材质），则会将所有材质放到mesh.meterials数组中，修改材质需要对每一个材质mesh.materials.material进行单独修改
5. 修改mesh.rotation、mesh.position、mesh.visible可设置物体旋转角度、位置、可见性。注意将物体的visible从false改成true,可能会造成画面卡顿

光源（Light）

全局光：THREE.AmbientLight，影响整个scene的光源，一般是为了弱化阴影或调整整体色调，可设置光照颜色，以颜色的明度确定光源亮度
平行光：THREE.DirectionalLight，模拟类似太阳的光源，所有被照射的区域亮度是一致的，可设置光照颜色、光照方向（通过向量确定方向），以颜色的明度确定光源亮度
点光源：THREE.PointLight：单点发光，照射所有方向，可设置光照强度，光照半径和光颜色

以下分别在 scene中添加了全局光，1个平行光及5个点光源，项目中平行光作为主要光源、点光源主要用于暗部补光。

var ambient = new THREE.AmbientLight( 0xcccccc );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xcccccc );
directionalLight.position.set( -2, 9, 1).normalize();//设置平行光方向
scene.add( directionalLight );
var pointlight = new THREE.PointLight(0xffffff, 1, 3000); 
pointlight.position.set(0, 0, 2000);//设置点光源位置
scene.add( pointlight );
var pointlight2 = new THREE.PointLight(0xffffff, 1, 2000);
pointlight2.position.set(-1000, 1000, 1000);
scene.add( pointlight2 );
var pointlight_back = new THREE.PointLight(0xffffff, 1, 2000); 
pointlight_back.position.set(0, 0, -2000);
scene.add( pointlight_back );
var pointlight_left = new THREE.PointLight(0xffffff, 1, 2000); 
pointlight_left.position.set( -2000, 0,0);
scene.add( pointlight_left );
var pointlight_right = new THREE.PointLight(0xffffff, 1, 2000); 
pointlight_right.position.set(0,  -2000, 0);
scene.add( pointlight_right );

渲染器(Renderer)

一般情况下我们使用的是WebGL渲染器。

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );//设置canvas的像素比为当前设备的屏幕像素比，避免高分屏下模糊
renderer.setSize( _container.offsetWidth, _container.offsetHeight );//设置渲染器大小,即canvas画布的大小
container.appendChild( renderer.domElement );//在页面中添加canvas

控制器（Controls）

FlyControls:飞行控制，用键盘和鼠标控制相机的移动和转动
OrbitControls::轨道控制器，模拟轨道中的卫星，绕某个对象旋转平移，用键盘和鼠标控制相机位置
PointerLockControls:指针锁定，鼠标离开画布依然能被捕捉到鼠标交互，主要用于游戏
TrackballControls：轨迹球控制器，通过键盘和鼠标控制前后左右平移和缩放场景
TransformControls:变换物体控制器，可以通过鼠标对物体的进行拖放等操作

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="space"></div>  
    <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
    <script src="../js/lib/threejs/three.js"></script>

    <script src="../js/lib/threejs/OrbitControls.js"></script>
    <script>


            var container, stats;

            var camera, scene, renderer;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;


            init();
            animate();
            var mesh;

            function init() {

                container = document.getElementById("space")
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
                camera.position.set(0, 0, 1500);

                scene = new THREE.Scene();

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


                var directionalLight = new THREE.DirectionalLight( 0xffffff );
                directionalLight.position.set( -5, 5, 5).normalize();
                scene.add( directionalLight );

                var pointlight = new THREE.PointLight(0x63d5ff, 1, 200); 
                pointlight.position.set(0, 0, 200);
                scene.add( pointlight );                
                var pointlight2 = new THREE.PointLight(0xffffff, 1, 200); 
                pointlight2.position.set(-200, 200, 200);
                scene.add( pointlight2 );
                var pointlight3 = new THREE.PointLight(0xffffff, 1.5, 200); 
                pointlight3.position.set(-200, 200, 0);
                scene.add( pointlight3 );

                var controls = new THREE.OrbitControls(camera,container);
            //controls.maxPolarAngle=1.5;
            //controls.minPolarAngle=1;
            controls.enableDamping=true;
            controls.enableKeys=false;
            controls.enablePan=false;
            controls.dampingFactor = 0.1;
            controls.rotateSpeed=0.1;
    //      controls.enabled = false;
            //controls.minDistance=1000;
            //controls.maxDistance=3000;



                var path = "../resource/sky/";
                var format = '.jpg';
                var urls = [
                        path + 'px' + format, path + 'nx' + format,
                        path + 'py' + format, path + 'ny' + format,
                        path + 'pz' + format, path + 'nz' + format
                    ];
                var skyMaterials = []; 
                for (var i = 0; i < urls.length; ++i) {
                    var loader = new THREE.TextureLoader();
                    loader.setCrossOrigin( this.crossOrigin );
                    var texture = loader.load( urls[i], function(){}, undefined, function(){} );

                    skyMaterials.push(new THREE.MeshBasicMaterial({
                        //map: THREE.ImageUtils.loadTexture(urls[i], {},function() { }), 
                        map: texture, 
                        overdraw: true,
                        side: THREE.BackSide,
                        //transparent: true,
                        //needsUpdate:true,
                        premultipliedAlpha: true
                        //depthWrite:true,

        //              wireframe:false,
                    })
                    ); 

                } 

                var cube = new THREE.Mesh(new THREE.CubeGeometry(500, 500,500), new THREE.MeshFaceMaterial(skyMaterials)); 
                cube.name="sky";
                scene.add(cube);
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onDocumentMouseMove( event ) {

                mouseX = ( event.clientX - windowHalfX ) / 2;
                mouseY = ( event.clientY - windowHalfY ) / 2;

            }

            //

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

//              camera.position.x += ( mouseX - camera.position.x ) ;
//              camera.position.y += ( mouseY - camera.position.y ) ;

                camera.lookAt( scene.position );

                renderer.render( scene, camera );

            }

    </script>
    </body>
</html>

手机阅读请扫描下方二维码：

本文仅供技术分享。原文链接地址： http://feg.netease.com/archives/266.html