ThreeJs学习笔记--常见几何体,材质，渲染器

几何体

分类

//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属性，修改双面显示

const material = new THREE.MeshLambertMaterial({
  color: 0x00ff00,//颜色
  side: THREE.DoubleSide,//双面
  //  side: THREE.FrontSide, //默认只有正面可见
});

材质

分类

高光镜面反射

漫反射

镜面反射和漫反射在没有高光的时候差异并不明显，可以通过设置高光属性来让效果突出

// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    shininess: 20, //高光部分的亮度，默认30
    specular: 0x444444, //高光部分的颜色
});

渲染器

锯齿属性：antialias

const renderer = new THREE.WebGLRenderer({
  antialias:true,
});
//或者
renderer.antialias = true,

antialias默认为false，设置true则是开启抗锯齿

设置设备像素比：setPixelRatio()

// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);//window.devicePixelRatio获取当前设备像素比

不同的显示设备像素比不同，设置像素比可以避免渲染模糊。像素比过高会影响运行，过低怎会模糊。

设置背景颜色.setClearColor()

renderer.setClearColor(0x444444, 1); //设置背景颜色

setClearColor有两个属性，第一个是颜色，支持十六进制，RGBA,RGB。第二个是透明度，可以设置0-1之间的浮点数