three.js学习《基础入门2》

曾经终败给现在 2022-12-08 14:13 152阅读 0赞

### three.js学习 《基础入门2》 ###

*  前一篇
 *  一、基础模型补充
 *   *  基本几何模型
     *  模型位置
 *  二、材质设置
 *   *  1.透明材质
     *  2.高光效果

--------------------

# 前一篇 #

[https://blog.csdn.net/a1424715994/article/details/108671076][https_blog.csdn.net_a1424715994_article_details_108671076]

--------------------

# 一、基础模型补充 #

## 基本几何模型 ##

//长方体 参数：长，宽，高
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    // 球体 参数：半径60 经纬度细分数40,40
    var geometry = new THREE.SphereGeometry(60, 40, 40);
    // 圆柱 参数：圆柱面顶部、底部直径50,50 高度100 圆周分段数
    var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
    // 正八面体
    var geometry = new THREE.OctahedronGeometry(50);
    // 正十二面体
    var geometry = new THREE.DodecahedronGeometry(50);
    // 正二十面体
    var geometry = new THREE.IcosahedronGeometry(50);

## 模型位置 ##

mesh.translateY(120); //网格模型沿Y轴正方向平移120
    mesh.position.set(120,0,0);//设置模型对象的xyz坐标为120,0,0

# 二、材质设置 #

## 1.透明材质 ##

代码如下（示例）：

var material_op=new THREE.MeshLambertMaterial({ 
                color:0xff0000,
                transparent:true,//开启透明
                opacity:0.2,//透明度
                wireframe: false,//是否渲染成线
            });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center]

## 2.高光效果 ##

代码如下（示例）：

var material_s=new THREE.MeshPhongMaterial({ 
                color:0x0000ff,
                specular:0xffffff,//金属度
                shininess:100,//光滑度（反光度）
            });

普通球和高光球比较  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center 1]

--------------------

光源效果上篇的代码里有写到两种方法，这里就不写了，这一篇就简单补充一些基础知识。  
原教程：[http://www.yanhuangxueyuan.com/Three.js/][http_www.yanhuangxueyuan.com_Three.js]

[https_blog.csdn.net_a1424715994_article_details_108671076]: https://blog.csdn.net/a1424715994/article/details/108671076
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/da5c717ed7eb43cc9075b1cfa47b2c26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d1311de6fabc404da44c75d4ec470a3b.png
[http_www.yanhuangxueyuan.com_Three.js]: http://www.yanhuangxueyuan.com/Three.js/