three.js问题记录---MeshLambertMaterial材质颜色失效

初学three.js，跟着教程走都比较顺利，自己尝试写个demo的时候发现创建一个物体，在给材质颜色的时候出现了一个问题。

在three.js官网文档（https://www.techbrood.com/threejs/docs/）中，我们可以看到材料（材质）在不同的场景下被赋予很多种分类，而这里我将LineBasicMaterial和MeshLambertMaterial拿来做示例。

在这里，我们首先对两种材质进行概念上的区分：

MeshBasicMaterial：基础材质，给几何体赋予一种简单的颜色，只与初始化定义的颜色有关，不受光照的影响。

MeshLambertMaterial：Lambert材质，一种表面粗糙，比较暗淡的材质。它是一种高级材质，可以对光源产生反应创建不光亮的表面。

// 创建相机
const scene2 = new THREE.Scene();
// 创建物体及材质
const geom2 = new THREE.SphereGeometry(60, 40, 40);
const mater2 = new THREE.MeshLambertMaterial({ color: 0xce21bc });
// const mater2 = new THREE.MeshLambertMaterial({ color: 0xce21bc });// 创建一个网格模型对象
const mesh4 = new THREE.Mesh(geom2, mater2)
mesh4.position.set(100, 0, 0);//设置mesh3模型对象的xyz坐标为120,0,0
scene2.add(mesh4);
// 创建一个相机
const width2 = 600; const height2 = 400
const camera2 = new THREE.PerspectiveCamera(45, width2 / height2, 0.1, 1000)
//设置相机位置
camera2.position.set(300, 300, 300);
//设置相机方向
camera2.lookAt(0, 0, 0);
//创建辅助坐标轴
const axesHelper2 = new THREE.AxesHelper(200);//参数200标示坐标系大小，可以根据场景大小去设置
scene2.add(axesHelper2);
// 创建一个渲染器
const renderer2 = new THREE.WebGLRenderer()
// renderer2.setClearColor('white'); //canvas画布颜色
renderer2.setSize(width2, height2)
renderer2.render(scene2, camera2)
const controls2 = new OrbitControls(camera2, renderer2.domElement)//创建控件对象
controls2.addEventListener('change', () => {renderer2.render(scene2, camera2)//监听鼠标，键盘事件
})
onMounted(() => {document.getElementById('my-three2')?.appendChild(renderer2.domElement)
})

在此基础上，我们得到了一个基础网孔材料（MeshBasicMaterial）下的物体，可以正常显示。此时我们将MeshBasicMaterial换成兰伯特网孔材料（MeshLambertMaterial）

// 创建物体及材质
const geom2 = new THREE.SphereGeometry(60, 40, 40);
// const mater2 = new THREE.MeshLambertMaterial({ color: 0xce21bc });
const mater2 = new THREE.MeshLambertMaterial({ color: 0xce21bc });

在这里我们仅展示部分代码，其余代码与上方贴出的一模一样。

可以看到在同样黑色背景的画布下，有一个黑色的物体存在，因背景颜色相同而被覆盖，我们将背景颜色换成其他颜色

renderer2.setClearColor('pink'); //canvas画布颜色

证实确实物体是存在的，只是材质颜色没起作用。
查看官网文档和网上的各种小贴士才找出问题所在，我们可以看到l对MeshLambertMateria的概念中写道：它是一种高级材质，可以对光源产生反应创建不光亮的表面。所以对其添加光源是必不可少的一步。

// 创建物体及材质
const geom2 = new THREE.SphereGeometry(60, 40, 40);
const mater2 = new THREE.MeshLambertMaterial({ color: 0xce21bc });
//添加光源
//会照亮场景里的全部物体（氛围灯），前提是物体是可以接受灯光的，这种灯是无方向的，即不会有阴影。
const ambient2 = new THREE.AmbientLight(0xffffff, 0.4);
const light2 = new THREE.PointLight(0xffffff, 1);//点光源，color:灯光颜色，intensity:光照强度
scene2.add(ambient2);
light2.position.set(200, 300, 400);
scene2.add(light2);

此刻我们可以看到物体的颜色发生了变化，并且和上方基础网孔材料相比是更加立体和形象的。光源（AmbientLight）在官网文档中也有相关API，可以自行了解。
因此问题特做记录，希望对小伙伴们有帮助！

three.js问题记录---MeshLambertMaterial材质颜色失效相关推荐

【Unity3D日常开发】修改游戏对象的材质颜色
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 一.前言前段时间比较忙,好久没更新博客了,感觉技术都下降了,还是要坚持输出 ...
three.js 使用粒子系统和材质动画来模拟火焰的运动
three.js 可以使用粒子系统和材质动画来模拟火焰的运动. 使用粒子系统,你可以使用多个粒子来模拟火焰的效果.每个粒子都有一些基本属性,例如位置.大小.颜色等.你可以调整这些属性来模拟火焰的运动, ...
java用cookie最新浏览商品_jQuery.cookie.js实现记录最近浏览过的商品功能示例
本文实例讲述了jQuery.cookie.js实现记录最近浏览过的商品功能.分享给大家供大家参考,具体如下: 1.jquery.cookie.js /*jquery.cookie.js */ jque ...
php 跳转历史页面,js不记录页面跳转历史的解决方法
js不记录页面跳转历史的解决方法在实际工作中,我们会遇到一个页面中有几个tab切换标签,tab切换是修改了浏览器地址",tab切换是默认记录到历史的.因此我们点击返回按钮的时候,不停的在几 ...
POI 单元格设置背景颜色失效（背景色设置方式），以及背景颜色生效后单元格边框线消失问题解决
单元格设置背景颜色失效原因当只设定 setFillForegroundColor 时是不行的,还需要再设置一下 setFillPattern 即 style.setFillForegroundCol ...
JS实现记录用户在网站的停留时间
JS实现记录用户在网站的停留时间今天给了一个需求让实现记录用户在当前页面进行操作的时间,如果两分钟之内没有进行操作就停止记时,直到再次操作时才开始继续记时.起初我自己用监听加定时器的方案实现,但是逻 ...
Win7，64位设置成豆沙绿护眼颜色后，vc6的visual assist 颜色失效，解决方法
Win7,64位设置成豆沙绿护眼颜色后,vc6的visual assist 颜色失效,解决方法: Tool->Option->Format,点击ResetAll按钮
记账方法，如何记录借款信息，并将支出记录标记上颜色
我们要如何如何记录借款信息,并将支出记录标记上颜色,让我们自己搞清楚的分辨出来?要如何操作?今天就有小编给大家发现一个办法来教大家要如何操作. 首先,第一步我们要进入晨曦记账本主页面,并在上方的功能栏 ...
js 点击button切换颜色_ThingJS 和three.js开发示例对比，让开发早点下班回家！3D 可视化...
ThingJS 3D框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于管理和维护,并且提供近200个官方示例,直接获取API能力,不需要基于3D概念进行开发,适合3D商业项目快速生成!距离 ...

three.js问题记录---MeshLambertMaterial材质颜色失效

three.js问题记录---MeshLambertMaterial材质颜色失效相关推荐

最新文章

热门文章