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
分类:
threeJS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现