2.网格模型

// 1. 创建几何模型
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // 2. 创建材质
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    // 3. 创建网格模型并传入几何模型与材质
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

网格模型,用来装载几何形状与材质

  • 几何形状
    • ThreeJS内置的几何形状
    • 根据顶点自定义的几何形状
      内置几何形状:
//长方体 参数:长,宽,高
    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);
  • 材质
    • 内置材质
    • 自定义材质
      内置材质:
	//基础网格材质对象   不受光照影响  没有棱角感
    var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff,
      wireframe:true,//线条模式渲染
    });
	// 漫反射材质 与光照计算  漫反射   产生棱角感
    var material = new THREE.MeshLambertMaterial({
      color: 0x00ff00,
	  transparent:true,//开启透明度
      opacity:0.5,//设置透明度具体值
    });

    // 高光材质 与光照计算  高光效果(镜面反射)    产生棱角感
    var material = new THREE.MeshPhongMaterial({
      color: 0xff0000,
	  // 反光
      specular:0x444444,
	  // 高光
      shininess:30,
    });

网格模型位置

mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120

mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
posted @   见信  阅读(192)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示