three.js 04-01 之 MeshBasicMaterial 材质

来源：互联网发布：视觉测试软件编辑：程序博客网时间：2024/05/29 16:48

前面我们用了六篇文章分别介绍了 three.js 中的各种光源。从本篇开始，我们将深入探讨一下 three.js 中各种常用材质。大体有如下表所示几种常用的材质：

名称描述MeshBasicMaterial （网格基础材质）基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框MeshDepthMaterial （网格深度材质）根据网格到相机的距离，这种材质决定如何给网格染色MeshNormalMaterial （网格法向材质）这是一种简单的材质，根据物体表面的法向向量计算颜色MeshLambertMaterial （网格朗伯材质）这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体MeshPhongMaterial （网格 Phong 式材质）这种材质也会考虑光照的影响，并且可以用来创建光亮的物体ShaderMaterial （着色器材质）这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的这色方式LineBasicMaterial （直线基础材质）这种材质可以用于 THREE.Line （直线）几何体，从而创建着色的直线。LineDeshedMaterial （虚线材质）跟直线基础材质一样，不过可以用来创建一种虚线效果这些材质都有一些共同的属性。对此，我们把这些属性分成了三类：

基础属性：这些属性是最常用的。通过这些属性可以控制物体的透明度、可见性以及如何引用物体（通过 uuid 或自定义名称 name）；
融合属性：每个物体都有一系列的融合属性。这些属性决定物体如何与背景融合；
高级属性：有一些高级属性可以控制 WebGL 上下文渲染物体的方法。大多数情况下都不会用到这些属性；

THREE.Material 类的基础属性，如下表所示：

属性描述id （标识符）用来标识材质，在创建时赋值name （名称）可以通过此属性赋予材质名称opacity （透明度）定义物体有多透明。与属性 transparent 一起使用才有效。取值范围是 0~1transparent （是否透明）决定物体是否透明。如果设为 true，three.js 就会根据 opacity 的值来渲染物体；否则，这个物体就不透明overdraw （过度绘制）当采用 THREE.CanvasRenderer （画布渲染器）进行渲染时，多边形会被渲染得稍大一点。即当使用这个渲染器画出来的物体有缝隙时，可以将此属性设置为 truevisible （可见性）定义此材质是否可见。设为 false 时，那么在场景中就看不到该物体side （侧面）通过此属性，可以决定在几何体的哪一面应用该材质。默认是 THREE.FrontSide （前面或外面）；还有 THREE.BackSide （后面或里面）；以及 THREE.DoubleSide （双面或双侧）needsUpdate （需要刷新）对于材质的某些修改，需要告诉 three.js 材质已经改变了。如果这个属性设为 true，three.js 就会使用修改后的材质属性刷新它的缓存材质还有几个跟融合相关的一般属性，如下表所示：

名称描述blending （融合）决定物体上的材质如何跟背景融合。融合模式一般是 NormalBlending，在这种模式下只显示材质的上层blendsrc （融合源）除了使用标准融合模式外，还可以通过指定 blendsrc、blenddst 及 blendequation 三个属性来创建自定义的融合模式。此属性指定物体（源）如何跟背景（目标）相融合。默认值是 SrcAlphaFactor，即用 alpha（透明度）通道进行融合blenddst （融合目标）此属性定义融合时如何使用背景（目标），默认是 OneMinusSrcAlphaFactor，其含义是：目标也使用源的 alpha 通道进行融合，只是用的值是 1 （源的 alpha 通道值）blendingequation （融合公式）指定如何使用 blendsrc 和 blenddst 的值。默认方法是 AddEquation，即将两者颜色的值相加。使用这三个属性，就可以创建自定义的融合模式最后，材质还有另外一些不常用到的高级属性，这跟 WebGL 内部如何工作相关。想要了解这些，最好就是通过 OpenGL 规范进行了解。因此，我们将不会深入讨论这些属性，包括：depthTest （深度测试）、depthWrite（深度缓存）、polygonOffset、polygonOffsetFactor、polygonOffsetUnits 及 alphaTest （透明度通道测试）等等。

接下来，我们先探讨一下 three.js 中比较简单的 MeshBasicMaterial 材质。这种材质不考虑光照的影响。该材质除了那些共有属性之外，通常还可以设置下面这些属性：

属性描述color （颜色）设置材质的颜色wireframe （线框）当此属性设为 true 时，物体将显示为线框。这对调试非常有利wireframeLinewidth （线框宽度）线框模式下，此属性设置线框的宽度。WebGLRenderer 不支持该属性wireframeLinecap （线框端帽）此属性定义线框模式下，顶点间线段的断点如何显示。可选的值有 round（圆）、butt（平）和square（方）三种。默认是 round。对于这个属性的修改结果在实际使用中很难看出来。WebGLRenderer 不支持该属性wireframeLinejoin （线框连接）此属性定义线框模式下，线段的连接点如何显示。可选的值有 round（圆）、bevel（斜角）和 miter（尖角）三种。默认是 round。WebGLRenderer 不支持该属性shading （着色）此属性定义如何着色。可选的值有 THREE.SmoothShading 和 THREE.FlatShading 两种vertexColors （顶点颜色）可以通过此属性为每一个顶点定义不同的颜色。CanvasRenderer 不支持该属性fox （雾化）此属性指定当前材质是否会受全局雾化效果设置的影响。如果设置成 false，那么全局的雾化效果设置就不会影响当前物体的渲染好了，对于网格基础材质来说，大体上就是这些东西了，下面我们来看一个完整的示例，代码如下：

<!DOCTYPE html><html><head>    <title>示例 04.01 - MeshBasicMaterial</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="../build/js/renderers/CanvasRenderer.js"></script><script src="../build/js/renderers/Projector.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 plane;var sphere;var meshMaterial;var ambientLight;var spotLight;    $(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; // 允许阴影投射canvasRender = new THREE.CanvasRenderer();canvasRender.setSize(window.innerWidth, window.innerHeight);render = webglRender;camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2147483647); // 2147483647camera.position.set(-20, 50, 40);var target = new THREE.Vector3(10, 10 , 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);scene.add(new THREE.AxesHelper(20));// 加入坐标轴// 加入一个平面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、plane、sphere 几何var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);// 定义网格材质meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, opacity: 0.8, wireframeLinewidth: 20});// 定义 cube、plane、sphere 网格cube = new THREE.Mesh(cubeGeometry, meshMaterial);plane = new THREE.Mesh(planeGeometry, meshMaterial);sphere = new THREE.Mesh(sphereGeometry, meshMaterial);var meshPosition = new THREE.Vector3(0, 7, 7);cube.position.set(meshPosition.x, meshPosition.y, meshPosition.z);plane.position.set(meshPosition.x, meshPosition.y, meshPosition.z);sphere.position.set(meshPosition.x, meshPosition.y, meshPosition.z);cube.name = 'addedMesh';plane.name = 'addedMesh';sphere.name = 'addedMesh';// 默认加入 cubescene.add(cube);// 加入一个环境灯ambientLight = new THREE.AmbientLight(0x0c0c0c);scene.add(ambientLight);// 加入一个聚光灯spotLight = new THREE.SpotLight(0xcccccc, 0.3);        spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;        spotLight.target = ground;        scene.add(spotLight);/** 用来保存那些需要修改的变量 */guiParams = new function() {this.rotationSpeed = 0.02;this.color = '#7777ff';this.side = 'front';this.selectedMesh = 'cube';this.switchRender = function() {if (render instanceof THREE.WebGLRenderer) {render = canvasRender;} else {render = webglRender;}$('#webgl-output').empty();$('#webgl-output')[0].appendChild(render.domElement);controls = new THREE.OrbitControls(camera, render.domElement);};this.wireframeLinejoin = 'round';this.wireframeLinecap = 'round';}/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */var gui = new dat.GUI();var folder = gui.addFolder("Mesh");folder.open();folder.addColor(guiParams, 'color').onChange(function(e) {meshMaterial.color = new THREE.Color(e);});folder.add(meshMaterial, 'opacity', 0.0, 1.0);folder.add(meshMaterial, 'transparent');folder.add(meshMaterial, 'wireframe');folder.add(meshMaterial, 'visible');folder.add(guiParams, 'side', ['front', 'back', 'double']).onChange(function(e) {switch (e) {case 'front':meshMaterial.side = THREE.FrontSide;break;case 'back':meshMaterial.side = THREE.BackSide;break;case 'double':meshMaterial.side = THREE.DoubleSide;break;}meshMaterial.needsUpdate = true;});folder.add(guiParams, 'selectedMesh', ['cube', 'plane', 'sphere']).onChange(function(e) {scene.remove(scene.getObjectByName('addedMesh'));switch (e) {case 'cube':scene.add(cube);break;case 'plane':scene.add(plane);break;case 'sphere':scene.add(sphere);break;}});gui.add(guiParams, 'switchRender');folder = gui.addFolder("CanvasRenderer");folder.open();folder.add(meshMaterial, 'overdraw');folder.add(meshMaterial, 'wireframeLinewidth', 1.0, 20.0);folder.add(guiParams, 'wireframeLinejoin', ['round', 'bevel', 'miter']).onChange(function(e) {meshMaterial.wireframeLinejoin = e;//meshMaterial.needsUpdate = true; // 无需更新即可生效});folder.add(guiParams, 'wireframeLinecap', ['round', 'butt', 'square']).onChange(function(e) {meshMaterial.wireframeLinecap = e;//meshMaterial.needsUpdate = true; // 无需更新即可生效});renderScene();    });/** 渲染场景 */function renderScene() {stats.update();rotateAddedMesh(); // 旋转已加入场景的物体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 rotateAddedMesh() {var addedMesh = scene.getObjectByName('addedMesh');//addedMesh.rotation.x += guiParams.rotationSpeed;addedMesh.rotation.y += guiParams.rotationSpeed;//addedMesh.rotation.z += guiParams.rotationSpeed;}</script></body></html>

在这个例子中你可以尝试去改变各种不同的属性。特别注意的是 side 属性。通过这个属性可以指定在几何体的哪一个面上应用材质。如果我们选择 selectedMesh 为 plane （平面）网格的话，再尝试调整 side 这个属性，就能很容易检验该属性是如何起作用的。假设你把 side 设置成了 FrontSide，因为材质往往是附着在物体表面上的，所以当 plane 旋转时，会有一半的时间看不到它，原因是你看到的是它的背面。如果你把 side 设置成 DoubleSide，那么 plane 的两面都有材质，所以你始终都能看到它。

未完待续···

阅读全文

1 0