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

相关推荐
艾莉丝努力练剑42 分钟前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
人生游戏牛马NPC1号2 小时前
学习 Flutter (三):玩安卓项目实战 - 上
android·学习·flutter
深圳卢先生5 小时前
CentOS 安装jenkins笔记
笔记·centos·jenkins
u_topian5 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
没有羊的王K6 小时前
SSM框架学习——day1
java·学习
林林要一直努力7 小时前
AOSP Settings模块问题初窥
android·学习·bug·android studio
余大侠在劈柴10 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
WarPigs10 小时前
游戏框架笔记
笔记·游戏·架构
金心靖晨11 小时前
redis汇总笔记
数据库·redis·笔记
遇见尚硅谷11 小时前
C语言:20250714笔记
c语言·开发语言·数据结构·笔记·算法