《Three.JS零基础入门教程》第七篇：材质详解

于 2024-05-21 13:37:17 发布
阅读量703 收藏 9
点赞数 25
分类专栏： webgis 文章标签： javascript 材质 前端 threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jdjxbsus/article/details/139090234
版权

 往期回顾：

《Three.JS零基础入门教程》第一篇：搭建开发环境

《Three.JS零基础入门教程》第二篇：起步案例

《Three.JS零基础入门教程》第三篇：开发辅助

《Three.JS零基础入门教程》第四篇：基础变换

《Three.JS零基础入门教程》第五篇：项目规划

《Three.JS零基础入门教程》第六篇：物体详解

下面接着介绍threejs中的材质：

不同的材质的应用场景不同, 从整体上分为两大类

  • 普通材质: 不受光线的影响

  • 物理材质: 模拟物体对光线的反射, 在不同的光照下显示效果不同

图片​

推荐

  • 快速写Deom, 简单使用的话, 采用MeshNormalMaterial, 最简单, 便于观察, 有明显的立体效果

  • 在生产时使用MeshStandardMaterial, 便于模拟真实的物理效果(为了保证更逼真的效果, 最好是设置环境贴图, 模拟物体对环境光的反射/折射)

1) 基础材质

对于基础材质MeshBasicMaterial我们主要使用的属性

  • color: 定义表面的颜色

  • wireframe: 是否显示线框

完整示例：


import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import * as dat from 'dat.gui'
// 一. 创建场景
const scene = new THREE.Scene()
// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)
// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)
// 集成Gui
const gui = new dat.GUI()
const data = {
  color: 0xff0000,
  wireframe: false,
}
gui.addColor(data, 'color').onChange((value) => {
console.log(cube.material)
  cube.material.color.set(value)
})
gui.add(data, 'wireframe').onChange((value) => {
  cube.material.wireframe = value
})
// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)
// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)
const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)
function animation() {
  renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

color对象的注意事项

color对象的rgb范围为[0,1]的浮点数,  而不是[0, 255]的整数

在源码中做了归一化处理, 就是数学里的比例换算再映射到sRGB色彩空间

setHex( hex, colorSpace = SRGBColorSpace ) {
  hex = Math.floor( hex );
// 归一化处理
this.r = ( hex >> 16 & 255 ) / 255;
this.g = ( hex >> 8 & 255 ) / 255;
this.b = ( hex & 255 ) / 255;
// 默认映射到SRGB色彩空间
  ColorManagement.toWorkingColorSpace( this, colorSpace );
return this;
}

改造MeshGui支持材质属性调整

import * as THREE from 'three'
import { BaseGui } from './BaseGui'
function defaultHandler(item, key, value) {
  item[key] = value
}
const Vector3Config = {
  x: {
    handler: defaultHandler,
  },
  y: {
    handler: defaultHandler,
  },
  z: {
    handler: defaultHandler,
  },
}
function eulerHandler(item, key, value) {
  item[key] = THREE.MathUtils.degToRad(value)
}
const EulerConfig = {
  x: {
    extend: [-180, 180],
    handler: eulerHandler,
  },
  y: {
    extend: [-180, 180],
    handler: eulerHandler,
  },
  z: {
    extend: [-180, 180],
    handler: eulerHandler,
  },
}
function geometryHandler(item, key, value, parent) {
const params = { ...parent.geometry.parameters }
  params[key] = value
  parent.geometry.dispose()
  parent.geometry = new THREE[parent.geometry.type](...Object.values(params))
}
const GeometryMapping = {
  BoxGeometry: {
    width: {
      name: 'x轴宽度',
      extend: [2, 20],
      handler: geometryHandler,
    },
    height: {
      name: 'y轴高度',
      extend: [2, 20],
      handler: geometryHandler,
    },
    depth: {
      name: 'z轴深度',
      extend: [2, 20],
      handler: geometryHandler,
    },
  },
  SphereGeometry: {
    radius: {
      name: '半径',
      min: 1,
      handler: geometryHandler,
    },
    widthSegments: {
      name: '水平分段数',
      min: 3,
      handler: geometryHandler,
    },
    heightSegments: {
      name: '垂直分段数',
      min: 2,
      handler: geometryHandler,
    },
  },
  PlaneGeometry: {
    width: {
      name: 'x轴宽度',
      min: 1,
      handler: geometryHandler,
    },
    height: {
      name: 'y轴高度',
      min: 1,
      handler: geometryHandler,
    },
  },
}
function colorHandler(item, key, value) {
  item[key].set(value)
}
const MaterialMapping = {
  MeshBasicMaterial: {
    color: {
      method: 'addColor',
      handler: colorHandler,
    },
    wireframe: {
      handler: defaultHandler,
    },
  },
}
export class MeshGui extends BaseGui {
constructor(options = {}) {
if (!options.target.isMesh) {
      console.error('target must be an instance of Mesh')
return
    }
super()
this.init(options)
  }
init(options) {
this.mesh = options.target
this.geometry = this.mesh.geometry
this.material = this.mesh.material
this.position = this.mesh.position
this.rotation = this.mesh.rotation
this.scale = this.mesh.scale
    options.position !== false ? this.initPosition() : ''
    options.rotation !== false ? this.initRotation() : ''
    options.scale !== false ? this.initScale() : ''
    options.geometry !== false ? this.initGeometry() : ''
    options.material !== false ? this.initMaterial() : ''
  }
  initPosition() {
    console.log(this.position)
this.initGuiFolder(this.position, '位置', this.mesh, Vector3Config)
  }
  initRotation() {
this.initGuiFolder(this.rotation, '旋转(度)', this.mesh, EulerConfig)
  }
  initScale() {
this.initGuiFolder(this.scale, '缩放', this.mesh, Vector3Config)
  }
  initGeometry() {
const geometry = this.geometry
const type = geometry.type
const config = GeometryMapping[type]
if (config) {
this.initGuiFolder(geometry.parameters, geometry.type, this.mesh, config)
    }
  }
  initMaterial() {
const material = this.material
const type = this.material.type
const config = MaterialMapping[type]
if (config) {
this.initGuiFolder(material, type, this.mesh, config)
    }
  }
}

2) 法向材质

MeshNormalMaterial(法向材质)的颜色由当前点的法向量(三维坐标)做为rgb值

法向量

法向量（Normal vector）是指垂直于某一对象表面上的一条向量

在三维几何中，一个平面可以由一个点和一个法向量唯一确定

法向量在计算物体表面的光照、碰撞检测以及物体位置的计算等方面很有用

图片

在three.js中, 法向量是一个Vector3(三维矢量对象), 有xyz三个属性. 取值范围[0, 1].

正好可以做为颜色的rgb值

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { MeshGui } from '../gui'
// 一. 创建场景
const scene = new THREE.Scene()
// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)
// 三. 创建物体
const cubeGeometry = new THREE.BoxGeometry(2, 2, 2)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
scene.add(cube)
new MeshGui({
  target: cube,
})
// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)
// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)
const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)
function animation() {
  renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

3) PBR材质

PBR材质, 也叫物理材质, 用于模拟光照到不同的物体上发生反射, 产生更逼真的显示效果

比较著名的物理模型有

  • Lambert模型: 主要模拟光线漫反射, 通常用于模拟木材/石材等表面粗糙的材质

  • Phong模型: 主要模拟光线镜面反射, 通常用于模拟金属/镜子等表面光滑的材质

图片

效果：

图片

树的顶部用圆锥体模拟

示例：

// 1. 创建一个Lambert材质的圆锥体
const coneGeometry = new THREE.ConeGeometry(2, 10, 32)
const coneMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff })
const cone = new THREE.Mesh(coneGeometry, coneMaterial)
cone.position.y = 5

此时, 我们发现渲染的是一个黑色的圆锥体, 是因为没有添加光源的原因.

这里我们分别使用两种不同的光源测试对比

  1. 环境光, 整个场景都会照亮, 不会形成阴影

  2. 点光源, 光从一个点向四周辐射, 向光面被照亮, 背光面会形成阴影

环境光

// 添加环境灯光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)

点光源

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.set(10, 10, 10)
scene.add(pointLight)

测试效果

图片

图片

树干可以用一个圆柱体模拟

示例：

// 1. 创建一个Lambert材质的圆锥体
const coneGeometry = new THREE.ConeGeometry(3, 5, 32)
const coneMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff })
const cone = new THREE.Mesh(coneGeometry, coneMaterial)
cone.position.y = 5

// 2. 创建一个Phone材质的圆柱体
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 5, 32, 2)
const cylinderMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff })
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)

// 创建一个组
const group = new THREE.Group()
// 添加到组中
group.add(cone)
group.add(cylinder)

建模后, 可以添加到一个组里, 方便统一管理

图片

完整示例：

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import { MeshGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)

// 三. 创建物体
// 1. 创建一个Lambert材质的圆锥体
const coneGeometry = new THREE.ConeGeometry(3, 5, 32)
const coneMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff })
const cone = new THREE.Mesh(coneGeometry, coneMaterial)
cone.position.y = 5

// 2. 创建一个Phone材质的圆柱体
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 5, 32, 2)
const cylinderMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff })
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial)

// 创建一个组
const group = new THREE.Group()
// 添加到组中
group.add(cone)
group.add(cylinder)

scene.add(group)

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.set(10, 10, 10)
scene.add(pointLight)

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

需要本教程视频版可加小助手（whxzdjy）备注【threejs】免费领取

下一期我们接着介绍threejs中的纹理

GIS前端嘉欣
关注
  • 25
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)
仙魁XAN
04-25 9853
Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质有效果图) 目录 Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图) 一、简单介绍 二、各种材质说明 1、MeshBasicMaterial 基础网格材质 2、MeshDepthMaterial 深度网格材质 3、MeshDistanceMaterial 距离网格材质 4、MeshLambertMaterial Lambert网格材质 5、MeshMatcapMat
《Three.js零基础入门教程》相关源码
07-20
1. three.js快速入门-新手上路 2. 顶点概念、几何体结构 3. 材质对象 4. 点线面模型对象 5. 光源对象 6. 层级模型、树结构 7. 几何体对象、曲线、三维建模 8. 纹理贴图 9. 相机对象(投影方式) 10. 精灵模型、粒子...
threejs之 GridHelper
qq_37200686的博客
05-16 730
GridHelper 的二维
threejs材质
疯狂的程序员
06-30 1186
个人博客地址: https://cxx001.gitee.io 前言 前面简单的介绍了材质，你已经了解到材质结合几何体就可以创建网格，网格对象才可以添加到Threejs渲染的场景中。材质就像物体的皮肤，决定了几何体的外表。如，几何体看起来是否像金属、透明与否，或者显示为线框。 threejs提供的材质： 名称 描述 MeshBasicMaterial（网格基础材质） 用于给几何体赋予一种简单的颜色，可显示几何体的线框 MeshDepthMaterial（网格深度材质） 这个材质使用
threejs 自定义网格辅助线 GridHelper 可以设置网格数量,单个格子大小
localhost
05-25 1149
在使用threejs默认的GridHelper时, 只可以设置网格的整体大小和份数,不可以设置单个格子的大小, 网上没有找到这方面的解决方案,决定自己根据官方代码进行修改.
THREE.JS中常用的3种材质
热门推荐
思念
05-15 2万+
总序材质和几何体构成网格，决定几何体是否像金属，透明与否，已经是否显示成线框。 MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框 MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体 MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体 材质的共有属性材质虽然可能有不同的分类，但是都是材质啊，还是有共
Three.JS教程5 threejs中的材质
最新发布
编程圈子-谢厂节的博客
02-16 1733
在Three.js中，材质是应用于几何体（Geometry）的外观和纹理的规则。它们决定了对象在场景中如何反射光线、显示颜色、反射环境等。Three.js提供了各种类型的材质，每种都有不同的特性和用途，使开发人员能够根据需求创建出各种视觉效果。官方文档地址本文源码地码lesson5。
Three.js快速入门教程
10-21
此外，还有一些优秀的教程和书籍，如《Three.js入门指南》、《Three.js开发指南》和《Learning Three.js》等，可以作为学习资源。 要注意的是，Three.js的更新频繁，不同版本间的API可能存在差异。因此，在查阅资料...
THREE.InfiniteGridHelper:无限抗锯齿网格
05-13
三.InfiniteGridHelper 无限抗锯齿网格。
Three.js 给obj模型添加材料纹理的样例
01-15
Three.js 给obj模型添加材料纹理的样例，鼠标左键可以围绕中心点对3d物体进行旋转和缩放
three webgl 在已有材质才上增加扩散效果
11-05
在threejs中，在加载模型，或者在已有的材质上增加扩散波浪效果。使用材质的onBeforeCompile的方法增加效果
简单了解three.js 着色器材质
11-19
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. 什么是着色器材质 着色器材质（ShaderMaterial）是一个用GLSL编写的小程序 ，在GPU上运行。它能够提供 materials 之外的效果，也可以将许多对象组合成单个Geometry或BufferGeometry以提高性能。 2. 着色器材质的变量 每个着色器材质都可以指定两种不同类型的sha
three.js之材质
youhebuke225的博客
11-30 1373
所谓材质，就是平常我们所说的塑料材质，金属材质，纤维材质等实质上所有材质都是WebGL着色器代码的封装。
threejs-材质
qq_37987033的博客
07-16 1082
threejs材质讲解：材质常用属性，材质种类，效果示例。
three.js绘制墙体，通过不规则路径生成墙体，3D墙体绘制
weixin_44275686的博客
07-18 3184
three.js画墙，bim，墙梁板柱的设计，鼠标点击两下生成墙体，不规则路径画墙，three.js
three.js 网格 GridHelper
Coder----Allen----Coder
04-18 3029
var size = 100; var divisions = 100; var gridHelper = new THREE.GridHelper( size, divisions ); scene.add( gridHelper );
three.js零基础入门教程源代码
06-26
### 回答1： 如果你想开始学习three.js，可以从教程源代码入手。...总的来说，three.js零基础入门教程源代码非常适合那些想要学习three.js的初学者，他们可以通过这些源代码快速入门，并了解更多three.js知识。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值