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

几何体

分类

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之间的浮点数

相关推荐
梁小憨憨1 小时前
zotero扩容
人工智能·笔记
Hello_Embed2 小时前
STM32HAL 快速入门(十九):UART 编程(二)—— 中断方式实现收发及局限分析
笔记·stm32·单片机·嵌入式硬件·学习
天上的光2 小时前
关于学习的一些感悟
学习
笑鸿的学习笔记2 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
red_redemption3 小时前
自由学习记录(95)
学习
东风西巷4 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
XISHI_TIANLAN5 小时前
【多模态学习】Q&A3:FFN的作用?Embedding生成方法的BERT和Word2Vec?非线性引入的作用?
学习·bert·embedding
用户931356002746 小时前
文件包含漏洞
笔记
KFCcrazy46 小时前
嵌入式学习日记(39)51单片机
嵌入式硬件·学习·51单片机
MuMuMu#7 小时前
JAVA NIO学习笔记基础强化学习总结
java·学习·nio