首页 > 其他分享 >Three.js教程:高光网格材质Phong

Three.js教程:高光网格材质Phong

时间:2023-06-23 16:00:59浏览次数:47  
标签:MeshPhongMaterial 高光 MeshLambertMaterial 镜面反射 网格 Three Phong 材质

推荐:将NSDT场景编辑器加入你的3D工具链
其他系列工具:NSDT简石数字孪生

高光网格材质Phong

高光网格材质MeshPhongMaterial和基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial一样都是网格模型的Mesh的材质。

高光网格材质MeshPhongMaterial和漫反射网格材质MeshLambertMaterial一样会受到光照的影响。

MeshPhongMaterial对光照反射特点

MeshPhongMaterialMeshLambertMaterial都会收到光照的影响区别在于,对光线反射方式有差异。

MeshPhongMaterial可以实现MeshLambertMaterial不能实现的高光反射效果。对于高光效果,你可以想象一下,你在太阳下面观察一辆车,你会发现在特定角度和位置,你可以看到车表面某个局部区域非常高亮。

镜面反射与漫反射

MeshPhongMaterial可以提供一个镜面反射效果,可以类比你生活中拿一面镜子,放在太阳光下,调整角度,可以把太阳光反射到其它地方,如果反射光对着眼睛,也就是反射光线和视线平行的时候,会非常刺眼。

MeshLambertMaterial对应的Mesh受到光线照射,没有镜面反射的效果,只是一个漫反射,也就是光线向四周反射。

高光亮度属性.shininess

通过MeshPhongMaterial的高光亮度.shininess属性,可以控制高光反射效果。

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

高光颜色属性.specular

可以给颜色属性.specular设置不同的值,比如0x4444440xfffffff 查看渲染效果变化。

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

上一篇:Three.js教程:Threejs常见几何体简介 (mvrlink.com)

下一篇:Three.js教程:WebGL渲染器设置(锯齿模糊) (mvrlink.com)

标签:MeshPhongMaterial,高光,MeshLambertMaterial,镜面反射,网格,Three,Phong,材质
From: https://www.cnblogs.com/mvrlink/p/17499235.html

相关文章

  • Three.js教程:Threejs常见几何体简介
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生Threejs常见几何体简介Three.js提供的几何体API很多,本节课先给大家介绍几个比较简单的案例,为后面的学习打下基础。你可以结合threejs文档,把下面动手把下面几何体相关代码全部测试一遍,并预览3D效果。//BoxG......
  • 每日一题力扣 1262 https://leetcode.cn/problems/greatest-sum-divisible-by-three/
    、 题解这道题目核心就算是要知道如果x%3=2的话,应该要去拿%3=1的数字,这样子才能满足%3=0贪心sum不够%3的时候,就减去余数为1的或者余数为2的需要注意两个余数为1会变成余数为2的,所以可能减去2个余数为1核心代码如下publicintmaxSumDivThreeOther(int[]nums){​  ......
  • Three.js教程:动画渲染循环
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生动画渲染循环threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。请求动画帧window.requestAnimationFrame//requestAnimationFrame实现周期性循环执行//requestAnimationF......
  • three.js 置换贴图 alpha贴图 的妙用 - 3D文字不引入字体文件
    实现将文字绘制到canvascanvas生成置换贴图alpha贴图将canvas转换成texture将texture贴到material修改shader将黑色背景区域去掉视频教程请移步b站canvas生成贴图classCanvas{canvas:HTMLCanvasElement=document.createElement("canvas");protectedctx:CanvasRen......
  • threejs-初识shader
    GLSL文件: importvertexGLSLfrom'./shaders/test1-patterns/vertex.glsl?raw' uniformmat4projectionMatrix;uniformmat4viewMatrix;uniformmat4modelMatrix;uniformvec2uFrequency;uniformfloatuTime;attributevec2uv;attributevec3po......
  • Three.js教程:相机控件轨道控制器OrbitControls
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生相机控件轨道控制器OrbitControls平时开发调试代码,或者展示模型的时候,可以通过相机控件OrbitControls实现旋转缩放预览效果。OrbitControls使用你可以打开课件案例源码测试下效果。旋转:拖动鼠标左键缩放......
  • Three.js教程:三维坐标系
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生三维坐标系本节课的目的就是为了加强大家对threejs三维空间的认识。辅助观察坐标系THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小,你可以根据需要改变尺寸。//AxesHelper:辅助观察的坐标系const......
  • Three.js教程:渲染器
    推荐:将NSDT场景编辑器加入你的3D工具链。其他系列工具:NSDT简石数字孪生渲染器生活中如果有了景物和相机,那么如果想获得一张照片,就需要你拿着相机,按一下,咔,完成拍照。对于threejs而言,如果完成“咔”这个拍照动作,就需要一个新的对象,也就是WebGL渲染器WebGLRenderer(opensnewwin......
  • Three.js教程:透视投影相机
    推荐:将NSDT场景编辑器加入你的3D工具链。其他系列工具:NSDT简石数字孪生Threejs如果想把三维场景Scene渲染到web网页上,还需要定义一个虚拟相机Camera,就像你生活中想获得一张照片,需要一台用来拍照的相机。透视投影相机PerspectiveCameraThreejs提供了正投影相机OrthographicCam......
  • threejs-css2dObject操作之物体遮挡标签后应该隐藏,而不是出现透视效果
    先看coding之前的效果: 这些在背面的标签的,转到一定角度,被模型遮挡后,理论上就不应该被看到。这才是比较符合实际的coding之后(另一侧对称点就被隐藏): 具体代码(j借助于光线投影)://绑定鼠标事件,当用户移动视角后触发()functionbindRayShotEvent(){document.addEvent......