three.js 04-06 之 MeshLambertMaterial 材质

最新推荐文章于 2024-03-14 15:17:19 发布
最新推荐文章于 2024-03-14 15:17:19 发布
阅读量3k 收藏
点赞数 1
分类专栏： javascript threejs webgl three.js 文章标签： javascript three.js threejs webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhulx_sz/article/details/78732852
版权
threejs 同时被 3 个专栏收录
59 篇文章 7 订阅
订阅专栏
webgl
59 篇文章 2 订阅
订阅专栏
three.js
59 篇文章 6 订阅
订阅专栏

    关于 three.js 库中的基础材质类型基本上就已经介绍完了。本篇开始介绍 three.js 库中提供的高级材质。例如比较常用的 MeshPhongMaterial 和 MeshLambertMaterial 两种材质。以及另一种最通用，但却最难用的 ShaderMaterial 材质，通过它，你可以创建自己的着色程序、定义材质以及物体如何显示等。

    我们先来看看 MeshLambertMaterial 这种用于暗淡、不光亮表面的材质。这种材质会对光源产生反应。这种材质除了前面提到的 color、opacity、transparent、flatShading、blending、depthTest、depthWrite、wirreframe、wireframeLinewidth、wireframeLinecap、wireframeLinejoin、vertexColors 及 fog 等属性外，还有两个比较特殊的 ambient 及 emissive 属性，具体参考如下表所示描述：

属性描述
ambient （环境光颜色）这仅仅是该材质的环境色。跟之前提到过的 AmbientLight 光源一起使用。这个颜色会与 AmbientLight 光源的颜色相乘。默认为白色
emissive （自发光颜色）这个是材质自发光的颜色。它其实并不像一个光源，只是一种不受光源照射影响的纯粹的颜色
这个材质创建的方法跟其他材质创建的方法基本无异，所以不再嗷述。下面给出一个具体的示例，代码如下： 

<!DOCTYPE html>
<html>
<head>
    <title>示例 04.06 - MeshLambertMaterial</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象的样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	var canvasRender;
	var controls;
	var stats;
	var guiParams;
	
	var ground;
	var cube;
	var sphere;
	var plane;
	var activeMesh;
	
	var meshMaterial;
	
	var ambientLight;
	var spotLight;
	var cameraHelper;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0xeeeeee, 1.0);
		webglRender.shadowMap.enabled = true; // 允许阴影投射
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000); // 2147483647
		camera.position.set(-45.5, 68.2, 90.9);
		
		var target = new THREE.Vector3(0, 0 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
		
		spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-30, 60, 60);
        spotLight.castShadow = true;
        scene.add(spotLight);
		cameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
		scene.add(cameraHelper);
		
		// 加入一个平面
		var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);
		var groundMaterial = new THREE.MeshBasicMaterial({color: 0x777777});
		ground = new THREE.Mesh(groundGeometry, groundMaterial);
		ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
		scene.add(ground);
		
		// 定义 cube, sphere, plane
        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
		var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);
        var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

		// 材质
        meshMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff, transparent: true, opacity: 0.5});
        cube = new THREE.Mesh(cubeGeometry, meshMaterial);
        sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
        plane = new THREE.Mesh(planeGeometry, meshMaterial);
		cube.castShadow = true;
		sphere.castShadow = true;
		plane.castShadow = true;

        cube.position.set(0, 12, 0);
        sphere.position.set(0, 14, 0);
        plane.position.set(0, 12, 0);
		
		/** 用来保存那些需要修改的变量 */
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			this.opacity = meshMaterial.opacity;
			this.transparent = meshMaterial.transparent;
			this.visible = meshMaterial.visible;
			this.ambient = '#ff0000';
			this.emissive = '#c31111';
			this.side = 'front';
			this.color = '#7777ff';
			this.selectedMesh = 'cube';
			this.spotLight = true;
			
			this.addMesh = function(e) {
				scene.remove(activeMesh);

				switch (e) {
					case "cube":
						activeMesh = cube;
						break;
					case "sphere":
						activeMesh = sphere;
						break;
					case "plane":
						activeMesh = plane;
						break;
				}
				scene.add(activeMesh);
			};
			this.updateMaterial = function() {
				meshMaterial.opacity = this.opacity;
				meshMaterial.transparent = this.transparent;
				meshMaterial.visible = this.visible;
				meshMaterial.ambient = new THREE.Color(this.ambient);
				meshMaterial.emissive = new THREE.Color(this.emissive);
				meshMaterial.color = new THREE.Color(this.color);
				switch (this.side) {
					case "front":
						meshMaterial.side = THREE.FrontSide;
						break;
					case "back":
						meshMaterial.side = THREE.BackSide;
						break;
					case "double":
						meshMaterial.side = THREE.DoubleSide;
						break;
				}
				meshMaterial.needsUpdate = true;
			}
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		var gui = new dat.GUI();
		var folder = gui.addFolder('Mesh');
		folder.open();
		folder.add(guiParams, 'opacity', 0.1, 1.0).onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.add(guiParams, 'transparent').onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.addColor(guiParams, 'ambient').onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.addColor(guiParams, 'emissive').onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.add(guiParams, 'visible').onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.add(guiParams, 'side', ['front', 'back', 'double']).onChange(function(e) {
			console.log(e);
            guiParams.updateMaterial();
		});
		folder.addColor(guiParams, 'color').onChange(function(e) {
			guiParams.updateMaterial();
		});
		folder.add(guiParams, 'selectedMesh', ['cube', 'sphere', 'plane']).onChange(function(e) {
			guiParams.addMesh(e);
		});
		gui.add(guiParams, 'spotLight').onChange(function(e) {
			scene.remove(spotLight);
			scene.remove(cameraHelper);
			if (e) {
				scene.add(spotLight);
				scene.add(cameraHelper);
			}
		});
		
		guiParams.updateMaterial();
		guiParams.addMesh(guiParams.selectedMesh);
		
		renderScene();
    });
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		rotateMesh(); // 旋转物体
		
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 旋转物体 */
	function rotateMesh() {
		scene.traverse(function(mesh) {
			if (mesh instanceof THREE.Mesh && mesh != ground) {
				//mesh.rotation.x += guiParams.rotationSpeed;
				mesh.rotation.y += guiParams.rotationSpeed;
				//mesh.rotation.z += guiParams.rotationSpeed;
			}
		});
	}

</script>
</body>
</html>
对于初学者来说，由于其中 ambient、emissive 及 color 三个属性在试验时不太好理解。基于此，结合本示例，特给出几种引导方法。一、对于 color 属性，可以尝试通过右上角菜单 spotLight 开关开启并关闭聚光灯，再通过调整 color 属性以观察改变 color 属性时的不同反应；二、在关掉 spotLight 的情况下，再去改变 color 属性几乎看不出任何效果。但此时调整 emissive 属性效果明显；三、在开启 spotLight 的情况下，再去改变 color 属性，可以看出对光源产生的反应明显。此时再去调整 emissive 属性效果也比较明显；四、无论哪种情况下，调整 ambient 属性，效果都不易察觉。


未完待续···

zhulx_sz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js - MeshLambertMaterial
pig_ning的博客
06-25 190
three.js - MeshLambertMaterial
three.js之材质-MeshLambertMaterial介绍和使用(vue中使用three.js16)
点燃火柴的博客
11-05 4424
MeshLambertMaterial材质介绍和使用1.MeshLambertMaterial材质介绍2.demo说明3.demo代码 1.MeshLambertMaterial材质介绍 MeshLambertMaterial材质用来渲染看上去暗淡不光亮的表面，该材质会对场景中的光源产生反应，这个材质可以配置的其他属性有color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinec
36 Three.js高级材质THREE.MeshLambertMaterial
热门推荐
现在学习也不晚
09-21 1万+
简介 这种材质可以用来创建暗淡的并不光亮的表面。 无光泽表面的材质，无镜面高光。 这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。 该材质非常易用，而且会对场景中的光源产生反应。 可以配置的前面的提高的属性：color、opacity、shading、blending、depthTest、depthWrite、wireframe、wirefram...
Three.js材质属性的实例应用（MeshLambertMaterial）
Potatoyou的博客
11-25 244
【代码】Three.js材质属性的实例应用（MeshLambertMaterial）
three.js学习笔记（一）：THREE.Materail五种基础材质的使用
qq_43641110的博客
02-10 3775
THREE.Materail五种基础材质的基本使用：属性介绍，代码示例
three.js-r136.zip
05-13
Three.js提供了各种材质类型，如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等，分别对应基础、兰伯特光照和菲涅尔光照效果。开发者可以调整颜色、透明度、纹理等属性，赋予3D对象丰富的视觉效果。 ...
three.js-r125.zip
06-16
Three.js提供了多种材质类型，如MeshBasicMaterial、MeshLambertMaterial等，每种都有不同的光照处理方式。在r125中，开发者可能会发现新的材质特性，如自定义着色器或者对光照模型的改进，增强了场景的真实感。 ...
three.js-master
11-08
Three.js提供多种材质类型，如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等。 5. **光源（Light）**：光源对3D场景的视觉效果至关重要，包括点光源、平行光、聚光灯等，它们可以模拟现实世界的...
my-furniture:Three.js项目-设计表格
05-23
6. **材质和纹理**：给几何体应用`THREE.Material`，如`MeshBasicMaterial`或`MeshLambertMaterial`，以改变其外观。可以添加纹理图像来增加真实感，例如木质纹理。 7. **对象组合**：将多个几何体组合成一个单一的...
three.js-master.zip
05-16
Three.js提供了各种材质类型，如MeshBasicMaterial、MeshLambertMaterial和MeshPhongMaterial，它们分别对应基础颜色、光照和高光效果。同时，可以通过纹理映射增加真实感，例如ImageTexture可以将图片应用到物体...
THREE.JS学习笔记四：材质
6块腹肌的博客
01-11 289
材质（Material）是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以 改变物体的颜色、纹理贴图、光照模式等。   1、基本材质（BasicMaterial） THREE.MeshLambertMaterial(opt)，opt 可以缺省，或者为包含各属性的值。如新建一个不透明度为 0.75 的黄色材质： new THREE.MeshBasicMaterial({ c...
Three 材质纹理 （总结三）
最新发布
n_229397218的博客
03-14 1384
该材质使用基于非物理的模型来计算反射率。可以用来创建暗淡的并不光亮的表面，该材质非常易用，而且会与场景中的光源产生反应。
three.js变形动画-使用MorphAnimMesh制作奔跑的小马动画(vue中使用three.js67)
点燃火柴的博客
05-29 710
使用MorphAnimMesh制作动画1.demo效果2.OrbitControls介绍3. 实现要点3.1 vue中引入OrbitControls控制器3.2 创建轨道控件实例3.3 render中更新轨道控件4. demo代码 1.demo效果 2.OrbitControls介绍 通过轨道控件OrbitControls 可以实现按住鼠标左键旋转物体，按住鼠标右键平移物体，滚动滚轮缩放物体，还可以通过方向键移动物体位置 OrbitControls操控说明 以下是操控和动作的比对说明 操控 动作
three.js问题记录---MeshLambertMaterial材质颜色失效
weixin_44691220的博客
12-06 2994
three.js材质颜色不起作用
Three.js第四章——光源对物体表面影响
00后的程序员
12-27 439
MeshBasicMaterial不受光照影响//MeshLambertMaterial受光照影响。
Three.js材质效果
u014291990的博客
11-29 4044
Three.js材质效果 本文是Three.js电子书的1.5节 前面案例中几何体对应网格模型材质只是设置了一个颜色，实际渲染的时候往往会设置其他的参数，比如实现玻璃效果要设置材质透明度，一些光亮的表面要添加高光效果。 半透明效果 更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数，添加opacity和transparent属性，opacity的值是0~1...
Three.js中的网孔材料
yinge0508的博客
12-07 841
1，兰伯特网孔材料（MeshLambertMaterial）：一种非发光材料的表面，计算每个顶点； 构造器（Constructor） ​MeshLambertMaterial(parameters) ​参数是一个使用一个或多个属性定义材料外观的对象。 color — 线条的十六进制颜色。缺省值为 0xffffff。 map — 设置纹理贴图。缺省为null。 lightMap — 设置光照贴图。缺省为null。 lightMapIntensity — 设置光照贴图强度。缺省值为1。 aoMap —..
threejs-材质
qq_37987033的博客
07-16 1086
threejs材质讲解：材质常用属性，材质种类，效果示例。
Three.js - MeshLambertMaterial 用于暗淡不光亮表面的材质
ithanmang
08-07 4021
这种材质，可以创建看上去并不光亮（不具有光滑度）的表面，例如墙体等。该材质会对场景中的光源产生反应，并且该材质自身也会发出颜色，自身发出的颜色不受环境的影响。 示例：MeshLambertMaterial.html 基础材质中很多属性，它基本上都具有，不同的是，它具有一个自发光的属性emissive，可以设置自发光的颜色、强度、以及贴图属性。 它的color属性是漫反射的颜色，默认为白色。 ...
three.js 透明材质
05-10
three.js 是一个基于 WebGL 的 JavaScript 3D 库，它提供了各种功能和工具，可以轻松地在Web 浏览器上创建并呈现 3D 场景。其中一个重要的功能是透明材质，这使得用户可以在场景中创建透明的物体，如玻璃、水或任何其他具有透明度的物体。 在 three.js 中，创建透明材质非常容易，只需在材质对象中添加一个属性 transparent，并将其设置为 true。此外，还可以使用 opacity 属性来控制材料的不透明度，值的范围是从 0（完全透明）到 1（完全不透明）。例如： ```javascript const material = new THREE.MeshLambertMaterial({ color: 0xff0000, opacity: 0.5, transparent: true, }); ``` 这里使用了 MeshLambertMaterial 来创建材料，但其他类型的材料也支持透明度。然后，将此材质应用于网格对象，并将其添加到场景中： ```javascript const geometry = new THREE.BoxGeometry(1, 1, 1); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 这将创建一个红色的正方形，它的透明度为 0.5，呈现出半透明的外观。可以在场景中添加多个透明对象，它们可以相互穿插、反射和折射光线，创造出非常酷的效果。 需要注意的是，在使用透明材质时，需要将遮挡物体的顺序正确排序。如果多个透明对象重叠在一起，它们的呈现可能会出现问题，因为每个对象的后面的对象可能会遮挡前面的对象。在 three.js 中，可以使用渲染器 renderer 的属性 alphaTest 和 sortObjects 来控制渲染的顺序和准确性。例如： ```javascript renderer.sortObjects = false; // 禁用默认排序 material.alphaTest = 0.5; // 设置 alphaTest 值以确保准确的排序 ``` 总之，three.js 中的透明材质使得用户可以创建各种具有透明度的物体，从而生动地展现 3D 场景。它们不仅可以增强场景的真实感和视觉效果，而且可以在游戏、动画和可视化等应用中发挥重要作用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值