【Threejs】05环境光和点光源

在日常环境中我们日常生活受到光照影响,黑夜里如果没有灯则什么都看不到,而在有光的情况下物体收到的光得以反射我们们眼睛中,所以在有光的情况下我们可以看清物体。

threejs中的MeshBasicMaterial物体不受光照影响,也就是说这种材质即使没有光我们也能看见。然而threejs中还有许多材质,需要有光亮才能够被看见,所以这一节我们来学习一下threejs中的灯光。


环境光

环境光会均匀照亮场景中所有的物体

创建MeshPhongMaterial材质的物体

MeshPhongMaterial是镜面材质,会反射部分的光

javascript 复制代码
const material = new THREE.MeshPhongMaterial({
    color: 0x86A8E7,
    shininess:100
})

这时在场景中只能看到黑色的物体的形状

只有添加了光源才能看到物体本身

javascript 复制代码
// 创建环境光
const light = new THREE.AmbientLight( 0x404040 ,15); // 柔和的白光
scene.add( light );

点光源

javascript 复制代码
// 创建点光源
const light2 = new THREE.PointLight( 0xff0000, 1, 100 );
light2.position.set( 5, 3, 5 );
scene.add( light2 );

此时可以看到物体有不一样颜色,这是因为我们在一侧添加了点光源

为物体添加反光效果

javascript 复制代码
// 让物体能够接收光源
cube.receiveShadow = true;
// 让物体投射光源
cube.castShadow = true;

给物体添加阴影

使其更接近现实生活

首先需要一个地板

javascript 复制代码
// 地板
const meshfloor = new THREE.Mesh(
    new THREE.PlaneGeometry(10,10),
    new THREE.MeshPhongMaterial({
        color: 0x4c221b,
        side:THREE.DoubleSide
    }),
);
scene.add(meshfloor);
// 旋转90°
meshfloor.rotation.x -= Math.PI/2;
meshfloor.position.y=-1;
javascript 复制代码
// 地面接收光源
meshfloor.receiveShadow = true;
// 点光源可以投射阴影
light2.castShadow = true;
renderer.shadowMap.enabled = true;

觉得不错的话可以点点赞哦!!!需要源码可以联系我

相关推荐
左耳咚6 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu6 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After6 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
用户47949283569158 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在8 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好18 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
明仔的阳光午后10 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人11 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San3012 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze12 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js