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

相关推荐
码荼27 分钟前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA1 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
ysa0510302 小时前
数论基础知识和模板
数据结构·c++·笔记·算法
祁思妙想2 小时前
八股学习(三)---MySQL
数据库·学习·mysql
今天背单词了吗9802 小时前
算法学习笔记:7.Dijkstra 算法——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·开发语言·数据结构·笔记·算法
mitt_3 小时前
《人生顶层设计》读书笔记7
笔记
智者知已应修善业3 小时前
【51单片机节日彩灯控制器设计】2022-6-11
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
amazinging3 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium
Jyywww1213 小时前
微信小程序学习笔记
笔记·学习·微信小程序
amazinging3 小时前
北京-4年功能测试2年空窗-报培训班学测开-第三十九天
python·学习·appium