几何体
分类
javascript
//BoxGeometry:长方体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// SphereGeometry:球体
const geometry = new THREE.SphereGeometry(50);
// CylinderGeometry:圆柱
const geometry = new THREE.CylinderGeometry(50,50,100);
// PlaneGeometry:矩形平面
const geometry = new THREE.PlaneGeometry(100,50);
// CircleGeometry:圆形平面
const geometry = new THREE.CircleGeometry(50);
BoxGeometry
SphereGeometry
CylinderGeometry
const geometry = new THREE.CylinderGeometry(50, 50, 100);//高100,上下直径50
const geometry = new THREE.CylinderGeometry(50, 100, 100);//高100,上50,下100
PlaneGeometry(单面的)
const geometry = new THREE.PlaneGeometry(100,50);
CircleGeometry(单面的)
const geometry = new THREE.CircleGeometry(50);
PlaneGeometry,CircleGeometry可以设置材质里的side属性,修改双面显示
javascript
const material = new THREE.MeshLambertMaterial({
color: 0x00ff00,//颜色
side: THREE.DoubleSide,//双面
// side: THREE.FrontSide, //默认只有正面可见
});
材质
分类
高光镜面反射
漫反射
镜面反射和漫反射在没有高光的时候差异并不明显,可以通过设置高光属性来让效果突出
javascript
// 模拟镜面反射,产生一个高光效果
const material = new THREE.MeshPhongMaterial({
color: 0xff0000,
shininess: 20, //高光部分的亮度,默认30
specular: 0x444444, //高光部分的颜色
});
渲染器
锯齿属性:antialias
javascript
const renderer = new THREE.WebGLRenderer({
antialias:true,
});
//或者
renderer.antialias = true,
antialias默认为false,设置true则是开启抗锯齿
设置设备像素比:setPixelRatio()
javascript
// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);//window.devicePixelRatio获取当前设备像素比
不同的显示设备像素比不同,设置像素比可以避免渲染模糊。像素比过高会影响运行,过低怎会模糊。
设置背景颜色.setClearColor()
javascript
renderer.setClearColor(0x444444, 1); //设置背景颜色
setClearColor有两个属性,第一个是颜色,支持十六进制,RGBA,RGB。第二个是透明度,可以设置0-1之间的浮点数