Three.js官网demo分析(二)---多种立体

这是今天要分析的 官网demo ,这是 源码

初始化相机,场景后,这次还初始化了两种光源。

// 初始化环境光照,表示环境的基础亮度,参数1为光源颜色,参数2为光源强度
        // 环境光在没有物体的情况下没用
        // 不透明物体的颜色是反射光的颜色,在初始化纹理处可设置ambient属性,表示物体反射环境光的能力
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
        scene.add( ambientLight );

        // 初始化点光源,参数为颜色,亮度,照射的最远距离
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );

具体可以看 入门指南中的光与影 ,另外除了光,你还需要了解光对不同材质的作用才能很好的得到你想要的效果,对于这一点, 入门指南中材质章节 有很好的解释。大致的意思如下:

  1. BasicMaterial -基础材质直接用 color 属性设置材质颜色,不会受光照影响,不会有高光阴影部分。
  2. MeshLambertMaterial -漫反射材料,颜色主要为光照在物体上漫反射到我们眼睛中的颜色, color 属性表示物体对散射光的反射能力,如果光源为白光0xffffff, color 设置为0x00ff00,即能反射绿光,那么物体就会呈现绿色,而如果光源为红光,那么物体就不会反射光,表现为黑色。 emissive 表现物体自发光的能力,一般在反射光弱的地方(如背光部分)会比较明显。 ambient 表示材料对环境光的反射能力,环境光一般是给场景一个基础的光亮,要与其他光源区别开来。
  3. MeshPhongMaterial -phone材质,有镜面反射的效果。其他属性与漫反射材质一样,有两个独有的属性, specularshininessspecular 表示镜面反射部分对光的反射能力。 shininess 控制高光的光斑的大小。

然后回到源码

// 将点光源作为相机的子对象,点光源的位置即相机的位置
        camera.add( pointLight );
        scene.add( camera );

文档中说

可以通过.add( object )方法来将对象进行组合,该方法将对象添加为子对象

camera继承自object3D,用这个属性将点光源添加为子对象,然后点光源的位置就会随相机的位置改变,就像你拿着一个手电筒一样。

// 加载纹理
        var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
        // wrapS表示纹理在水平方向如何包裹,wrapT表示在垂直方向,使用RepeatWrapping,纹理将简单地重复到无穷大  ??
        map.wrapS = map.wrapT = THREE.RepeatWrapping;
        // 沿着轴,通过具有最高纹素密度的像素的样本数  ??
        map.anisotropy = 16;
        // 初始化Phong网孔材料,具有镜面高光的光泽表面
        var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );

加载纹理这部分我不是很理解,感兴趣可以看下 官网

然后是构建几何体部分,推荐看 入门指南中的基础几何形状 和官网。其中比较有趣的是

// 构建二维对象数组
        var points = [];
        for ( var i = 0; i < 50; i ++ ) {
            points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
        }
        // 车床几何体,由二维对象数组形成的曲线绕x轴旋转一周获得
        object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
        object.position.set( - 100, 0, - 200 );
        scene.add( object );

这个可以用来构造花瓶等曲面轴对称物体,其中的二维对象数组就像我们学的一元函数一样,在坐标系中可以表示出各种曲线,然后绕x轴旋转一周得到立体图形。这个的关键就是怎么得到你想要形状的数学表达式,这个就需要数学功底了,不知道有没有画一条线就能得到近似表达式的软件。

// 对该对象和子对象应用的回调函数
        scene.traverse( function ( object ) {
            // 如果对象为网格对象
            if ( object.isMesh === true ) {

                object.rotation.x = timer * 5;
                object.rotation.y = timer * 2.5;

            }

        } );

这个 traverse 方法也是继承自object3D,这里用来给场景中的所有mesh物体加上循环调用的函数,使其不断旋转。

下面是最近搜集的好资料

  1. three.js学习群群主的博客,相当详细。 https://blog.csdn.net/qq_3010...
  2. three.js正统的学习网站 http://learningthreejs.com/
  3. 挺详细的博文 https://www.cnblogs.com/cathe...
  4. 有人写的文档 https://teakki.com/p/58a3ef1b...
  5. 对光源的讲解 http://www.hangge.com/blog/ca...
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章