0
0

《Learn Three.js》学习（4） 材质

前言：

材质为scene中物体的皮肤，有着不同的特性和视觉效果。

材质的共有属性：

基础属性：

融合属性：

融合决定了我们渲染的颜色如何与它们后面的颜色交互

高级属性：

与WebGL内部有关

简单材质：

MeshBasicMaterial

创建材质：可以使用构造函数一次性传完所有参数；或先创建一个实例，再对实例的属性数据赋值

  1. var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

MeshDepthMaterial

不是由光照或者某个材质决定的，而是由相机距离决定的。不需要参数

wireframe 是否显示线框

wireframe 指定线框线宽度（该属性只对THRER.CanvasRender有效）

（方块再near和far之间的距离渲染）

  1. scene.overrideMaterial = new THREE.MeshLambertMaterial();

使用scene.overrideMaterial属性，保证场景中所有物体都使用该材质，而无需再每个THREE.Mesh对象上显示声明。

联合材质
  1. // 创建一个深度材质，这种材质可以用来渲染对象的深度信息，通常用于特效或者后期处理。
  2. var cubeMaterial = new THREE.MeshDepthMaterial();
  4. // 创建一个基本颜色材质，设置颜色为绿色（0x00ff00），并且使其透明，透明度为0.6。
  5. // blending 设置为 THREE.MultiplyBlending，这是一种混合模式，可以让颜色之间进行乘法混合，常用于创建透明或者半透明效果。
  6. var colorMaterial = new THREE.MeshBasicMaterial({
  7.   color: 0x00ff00, // 绿色
  8.   transparent: true, // 设置材质为透明
  9.   opacity: 0.6, // 设置透明度为0.6
  10.   blending: THREE.MultiplyBlending // 设置混合模式
  11. });
  13. // 使用 SceneUtils 的 createMultiMaterialObject 方法创建一个多材质对象。
  14. // 这个方法接受两个参数：几何体（cubeGeometry）和材质数组（[cubeMaterial, colorMaterial]）。
  15. // 这样，同一个几何体可以被多个材质覆盖，这里是一个深度材质和一个基本颜色材质。
  16. var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [cubeMaterial, colorMaterial]);
  18. // 调整第二个材质（颜色材质）的缩放比例，使其稍微小于1，这样可以创建一种视觉效果，
  19. // 使得颜色材质看起来像是覆盖在深度材质之上的一层半透明膜。
  20. cube.children[1].scale.set(0.99, 0.99, 0.99);
  22. // 将创建的多材质立方体添加到场景中。
  23. scene.add(cube);

THREE.MultiplyBlending会将前景色和背景色相乘。

MeshNormalMaterial

每一个免得颜色是由从该面向外指的法向量计算得到

  1.         for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
  2.             var face = sphere.geometry.faces[f];
  3.             var centroid = new THREE.Vector3(0, 0, 0);
  4.             centroid.add(sphere.geometry.vertices[face.a]);
  5.             centroid.add(sphere.geometry.vertices[face.b]);
  6.             centroid.add(sphere.geometry.vertices[face.c]);
  7.             centroid.divideScalar(3);
  9.             var arrow = new THREE.ArrowHelper(
  10.                     face.normal,
  11.                     centroid,
  12.                     2,
  13.                     0x3333FF,
  14.                     0.5,
  15.                     0.5);
  16.             sphere.add(arrow);
  17.         }

对于每个THREE.Face3的对象来说，把构成该面的顶点相加再除以3来计算质心

单几何体上使用多种材质

  1.         // 多材质联合
  2.         var group = new THREE.Mesh();
  3.         var mats = [];
  4.         mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
  5.         mats.push(new THREE.MeshBasicMaterial({color: 0x019e60}));
  6.         mats.push(new THREE.MeshBasicMaterial({color: 0x029e60}));
  7.         mats.push(new THREE.MeshBasicMaterial({color: 0x039e60}));
  8.         mats.push(new THREE.MeshBasicMaterial({color: 0x049e60}));
  9.         mats.push(new THREE.MeshBasicMaterial({color: 0x059e60}));
  10.         for (var i = 0; i < 6; i++) {
  11.            for (var j = 0; j < 6; j++) {
  12.              for (var k = 0; k < 6; k++) {
  13.                 var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
  14.                 var cube = new THREE.Mesh(cubeGeom, mats);
  15.                 cube.position.set(i * 3 - 3, j * 3 - 3, k * 3 - 3);
  17.                 group.add(cube);
  18.              }
  19.            }
  20.         }

高级材质：

THREE.MeshLambertMaterial

可以用来创建暗淡的并不光亮的表面，材质易用，对光源有反应,支持线框绘制属性

emissive（自发光）该属性不使其成为光源，而是不受光源影响，default color Black

看起来较为暗淡 。

THREE.MeshPhongMaterial

Phong(冯氏（明暗处理算法的一种名称）)

可以创建一种光亮材质，可以模拟塑料质感和金属质感

emissive的作用影响geometry的color属性

THREE.MeshStandardMaterial

更加正确的物理计算物体表面和光源的互动，更好表现塑料和金属材质

THREE.MeshPhysicalMaterial

提供更多对反光度的控制

THREE.ShaderMaterial

可以自定义着色器，直接再webgl环境下运行，将three.js中js像素转换为屏幕上的像素，且可以明确覆盖或修改或指定Three.js中的默认值

前两个即webgl中渲染基础，vertexShader顶点着色器，fragmentShader片元着色器

  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  6.     <title>Example 04.08 - Shader material - http://glsl.heroku.com/</title>
  7.     <script type="text/javascript" src="../libs/three.js"></script>
  9.     <script type="text/javascript" src="../libs/stats.js"></script>
  10.     <script type="text/javascript" src="../libs/dat.gui.js"></script>
  11.     <style>
  12.         body {
  13.             /* set margin to 0 and overflow to hidden, to go fullscreen */
  14.             margin: 0;
  15.             overflow: hidden;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  21. <script id="vertex-shader" type="x-shader/x-vertex">
  22.     uniform float time;
  23.     varying vec2 vUv;
  24.     void main()
  25.     {
  26.     vec3 posChanged = position;
  27.     posChanged.x = posChanged.x*(abs(sin(time*1.0)));
  28.     posChanged.y = posChanged.y*(abs(cos(time*1.0)));
  29.     posChanged.z = posChanged.z*(abs(sin(time*1.0)));
  30.     //gl_Position = projectionMatrix * modelViewMatrix * vec4(position*(abs(sin(time)/2.0)+0.5),1.0);
  31.     gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);
  32.     }
  34. </script>
  36. <script id="fragment-shader-1" type="x-shader/x-fragment">
  37.     precision highp float;
  38.     uniform float time;
  39.     uniform float alpha;
  40.     uniform vec2 resolution;
  41.     varying vec2 vUv;
  43.     void main2(void)
  44.     {
  45.     vec2 position = vUv;
  46.     float red = 1.0;
  47.     float green = 0.25 + sin(time) * 0.25;
  48.     float blue = 0.0;
  49.     vec3 rgb = vec3(red, green, blue);
  50.     vec4 color = vec4(rgb, alpha);
  51.     gl_FragColor = color;
  52.     }
  54.     #define PI 3.14159
  55.     #define TWO_PI (PI*2.0)
  56.     #define N 68.5
  58.     void main(void)
  59.     {
  60.     vec2 center = (gl_FragCoord.xy);
  61.     center.x=-10.12*sin(time/200.0);
  62.     center.y=-10.12*cos(time/200.0);
  64.     vec2 v = (gl_FragCoord.xy - resolution/20.0) / min(resolution.y,resolution.x) * 15.0;
  65.     v.x=v.x-10.0;
  66.     v.y=v.y-200.0;
  67.     float col = 0.0;
  69.     for(float i = 0.0; i < N; i++)
  70.     {
  71.     float a = i * (TWO_PI/N) * 61.95;
  72.     col += cos(TWO_PI*(v.y * cos(a) + v.x * sin(a) + sin(time*0.004)*100.0 ));
  73.     }
  75.     col /= 5.0;
  77.     gl_FragColor = vec4(col*1.0, -col*1.0,-col*4.0, 1.0);
  78.     }
  80. </script>
  82. <script id="fragment-shader-2" type="x-shader/x-fragment">
  83.     // from http://glsl.heroku.com/e#7906.0
  85.     uniform float time;
  86.     uniform vec2 resolution;
  88.     // 2013-03-30 by @hintz
  90.     #define CGFloat float
  91.     #define M_PI 3.14159265359
  93.     vec3 hsvtorgb(float h, float s, float v)
  94.     {
  95.     float c = v * s;
  96.     h = mod((h * 6.0), 6.0);
  97.     float x = c * (1.0 - abs(mod(h, 2.0) - 1.0));
  98.     vec3 color;
  100.     if (0.0 <= h && h < 1.0)
  101.     {
  102.     color = vec3(c, x, 0.0);
  103.     }
  104.     else if (1.0 <= h && h < 2.0)
  105.     {
  106.     color = vec3(x, c, 0.0);
  107.     }
  108.     else if (2.0 <= h && h < 3.0)
  109.     {
  110.     color = vec3(0.0, c, x);
  111.     }
  112.     else if (3.0 <= h && h < 4.0)
  113.     {
  114.     color = vec3(0.0, x, c);
  115.     }
  116.     else if (4.0 <= h && h < 5.0)
  117.     {
  118.     color = vec3(x, 0.0, c);
  119.     }
  120.     else if (5.0 <= h && h < 6.0)
  121.     {
  122.     color = vec3(c, 0.0, x);
  123.     }
  124.     else
  125.     {
  126.     color = vec3(0.0);
  127.     }
  129.     color += v - c;
  131.     return color;
  132.     }
  134.     void main(void)
  135.     {
  137.     vec2 position = (gl_FragCoord.xy - 0.5 * resolution) / resolution.y;
  138.     float x = position.x;
  139.     float y = position.y;
  141.     CGFloat a = atan(x, y);
  143.     CGFloat d = sqrt(x*x+y*y);
  144.     CGFloat d0 = 0.5*(sin(d-time)+1.5)*d;
  145.     CGFloat d1 = 5.0;
  147.     CGFloat u = mod(a*d1+sin(d*10.0+time), M_PI*2.0)/M_PI*0.5 - 0.5;
  148.     CGFloat v = mod(pow(d0*4.0, 0.75),1.0) - 0.5;
  150.     CGFloat dd = sqrt(u*u+v*v);
  152.     CGFloat aa = atan(u, v);
  154.     CGFloat uu = mod(aa*3.0+3.0*cos(dd*30.0-time), M_PI*2.0)/M_PI*0.5 - 0.5;
  155.     // CGFloat vv = mod(dd*4.0,1.0) - 0.5;
  157.     CGFloat d2 = sqrt(uu*uu+v*v)*1.5;
  159.     gl_FragColor = vec4( hsvtorgb(dd+time*0.5/d1, sin(dd*time), d2), 1.0 );
  160.     }
  162. </script>
  164. <script id="fragment-shader-3" type="x-shader/x-fragment">
  165.     uniform vec2 resolution;
  166.     uniform float time;
  168.     vec2 rand(vec2 pos)
  169.     {
  170.     return fract( 0.00005 * (pow(pos+2.0, pos.yx + 1.0) * 22222.0));
  171.     }
  172.     vec2 rand2(vec2 pos)
  173.     {
  174.     return rand(rand(pos));
  175.     }
  177.     float softnoise(vec2 pos, float scale)
  178.     {
  179.     vec2 smplpos = pos * scale;
  180.     float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;
  181.     float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;
  182.     float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;
  183.     float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;
  185.     vec2 a = fract(smplpos);
  186.     return mix(
  187.     mix(c0, c1, smoothstep(0.0, 1.0, a.x)),
  188.     mix(c2, c3, smoothstep(0.0, 1.0, a.x)),
  189.     smoothstep(0.0, 1.0, a.y));
  190.     }
  192.     void main(void)
  193.     {
  194.     vec2 pos = gl_FragCoord.xy / resolution.y;
  195.     pos.x += time * 0.1;
  196.     float color = 0.0;
  197.     float s = 1.0;
  198.     for(int i = 0; i < 8; i++)
  199.     {
  200.     color += softnoise(pos+vec2(i)*0.02, s * 4.0) / s / 2.0;
  201.     s *= 2.0;
  202.     }
  203.     gl_FragColor = vec4(color);
  204.     }
  206. </script>
  208. <script id="fragment-shader-4" type="x-shader/x-fragment">
  209.     uniform float time;
  210.     uniform vec2 resolution;
  211.     vec2 rand(vec2 pos)
  212.     {
  213.     return
  214.     fract(
  215.     (
  216.     pow(
  217.     pos+2.0,
  218.     pos.yx+2.0
  219.     )*555555.0
  220.     )
  221.     );
  222.     }
  224.     vec2 rand2(vec2 pos)
  225.     {
  226.     return rand(rand(pos));
  227.     }
  229.     float softnoise(vec2 pos, float scale) {
  230.     vec2 smplpos = pos * scale;
  231.     float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;
  232.     float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;
  233.     float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;
  234.     float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;
  236.     vec2 a = fract(smplpos);
  237.     return mix(mix(c0, c1, smoothstep(0.0, 1.0, a.x)),
  238.     mix(c2, c3, smoothstep(0.0, 1.0, a.x)),
  239.     smoothstep(0.0, 1.0, a.x));
  240.     }
  242.     void main( void ) {
  243.     vec2 pos = gl_FragCoord.xy / resolution.y - time * 0.4;
  245.     float color = 0.0;
  246.     float s = 1.0;
  247.     for (int i = 0; i < 6; ++i) {
  248.     color += softnoise(pos + vec2(0.01 * float(i)), s * 4.0) / s / 2.0;
  249.     s *= 2.0;
  250.     }
  251.     gl_FragColor = vec4(color,mix(color,cos(color),sin(color)),color,1);
  252.     }
  254. </script>
  256. <script id="fragment-shader-5" type="x-shader/x-fragment">
  258.     uniform float time;
  259.     uniform vec2 resolution;
  261.     // tie nd die by Snoep Games.
  263.     void main( void ) {
  265.     vec3 color = vec3(1.0, 0., 0.);
  266.     vec2 pos = (( 1.4 * gl_FragCoord.xy - resolution.xy) / resolution.xx)*1.5;
  267.     float r=sqrt(pos.x*pos.x+pos.y*pos.y)/15.0;
  268.     float size1=2.0*cos(time/60.0);
  269.     float size2=2.5*sin(time/12.1);
  271.     float rot1=13.00; //82.0+16.0*sin(time/4.0);
  272.     float rot2=-50.00; //82.0+16.0*sin(time/8.0);
  273.     float t=sin(time);
  274.     float a = (60.0)*sin(rot1*atan(pos.x-size1*pos.y/r,pos.y+size1*pos.x/r)+time);
  275.     a += 200.0*acos(pos.x*2.0+cos(time/2.0))+asin(pos.y*5.0+sin(time/2.0));
  276.     a=a*(r/50.0);
  277.     a=200.0*sin(a*5.0)*(r/30.0);
  278.     if(a>5.0) a=a/200.0;
  279.     if(a<0.5) a=a*22.5;
  280.     gl_FragColor = vec4( cos(a/20.0),a*cos(a/200.0),sin(a/8.0), 1.0 );
  281.     }
  283. </script>
  285. <script id="fragment-shader-6" type="x-shader/x-fragment">
  286.     uniform float time;
  287.     uniform vec2 resolution;
  288.     void main( void )
  289.     {
  291.     vec2 uPos = ( gl_FragCoord.xy / resolution.xy );//normalize wrt y axis
  292.     //suPos -= vec2((resolution.x/resolution.y)/2.0, 0.0);//shift origin to center
  294.     uPos.x -= 1.0;
  295.     uPos.y -= 0.5;
  297.     vec3 color = vec3(0.0);
  298.     float vertColor = 2.0;
  299.     for( float i = 0.0; i < 15.0; ++i )
  300.     {
  301.     float t = time * (0.9);
  303.     uPos.y += sin( uPos.x*i + t+i/2.0 ) * 0.1;
  304.     float fTemp = abs(1.0 / uPos.y / 100.0);
  305.     vertColor += fTemp;
  306.     color += vec3( fTemp*(10.0-i)/10.0, fTemp*i/10.0, pow(fTemp,1.5)*1.5 );
  307.     }
  309.     vec4 color_final = vec4(color, 1.0);
  310.     gl_FragColor = color_final;
  311.     }
  313. </script>
  314. <div id="Stats-output">
  315. </div>
  316. <!-- Div which will hold the Output -->
  317. <div id="WebGL-output">
  318. </div>
  319. <!-- Javascript code that runs our Three.js examples -->
  320. <script type="text/javascript">
  322.     // once everything is loaded, we run our Three.js stuff.
  323.     function init() {
  324.         var stats = initStats();
  325.         // create a scene, that will hold all our elements such as objects, cameras and lights.
  326.         var scene = new THREE.Scene();
  327.         // create a camera, which defines where we're looking at.
  328.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  330.         // create a render and set the size
  332.         var renderer = new THREE.WebGLRenderer();
  333.         renderer.setClearColor(new THREE.Color(0x000000, 1.0));
  334.         renderer.setSize(window.innerWidth, window.innerHeight);
  335.         renderer.shadowMapEnabled = true;
  336.         var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
  337.         var meshMaterial1 = createMaterial("vertex-shader", "fragment-shader-1");
  338.         var meshMaterial2 = createMaterial("vertex-shader", "fragment-shader-2");
  339.         var meshMaterial3 = createMaterial("vertex-shader", "fragment-shader-3");
  340.         var meshMaterial4 = createMaterial("vertex-shader", "fragment-shader-4");
  341.         var meshMaterial5 = createMaterial("vertex-shader", "fragment-shader-5");
  342.         var meshMaterial6 = createMaterial("vertex-shader", "fragment-shader-6");
  343.         var material = new THREE.MeshFaceMaterial(
  344.                 [meshMaterial1,
  345.                     meshMaterial2,
  346.                     meshMaterial3,
  347.                     meshMaterial4,
  348.                     meshMaterial5,
  349.                     meshMaterial6]);
  350. //        var material = new THREE.MeshFaceMaterial([meshMaterial2, meshMaterial2, meshMaterial1, meshMaterial1, meshMaterial1, meshMaterial1]);
  352.         var cube = new THREE.Mesh(cubeGeometry, material);
  354.         // add the sphere to the scene
  355.         scene.add(cube);
  357.         // position and point the camera to the center of the scene
  358.         camera.position.x = 30;
  359.         camera.position.y = 30;
  360.         camera.position.z = 30;
  361.         camera.lookAt(new THREE.Vector3(0, 0, 0));
  363.         // add subtle ambient lighting
  364.         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
  365.         scene.add(ambientLight);
  367.         // add spotlight for the shadows
  368.         var spotLight = new THREE.SpotLight(0xffffff);
  369.         spotLight.position.set(-40, 60, -10);
  370.         spotLight.castShadow = true;
  371.         scene.add(spotLight);
  373.         // add the output of the renderer to the html element
  374.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  376.         // call the render function
  377.         var step = 0;
  378.         var oldContext = null;
  380.         var controls = new function () {
  381.             this.rotationSpeed = 0.02;
  382.             this.bouncingSpeed = 0.03;
  384.             this.opacity = meshMaterial1.opacity;
  385.             this.transparent = meshMaterial1.transparent;
  387.             this.visible = meshMaterial1.visible;
  388.             this.side = "front";
  390.             this.wireframe = meshMaterial1.wireframe;
  391.             this.wireframeLinewidth = meshMaterial1.wireframeLinewidth;
  393.             this.selectedMesh = "cube";
  394.             this.shadow = "flat";
  395.         };
  396.         render();
  397.         function render() {
  398.             stats.update();
  399.             cube.rotation.y = step += 0.01;
  400.             cube.rotation.x = step;
  401.             cube.rotation.z = step;
  402.             cube.material.materials.forEach(function (e) {
  403.                 e.uniforms.time.value += 0.01;
  404.             });
  405.             // render using requestAnimationFrame
  406.             requestAnimationFrame(render);
  407.             renderer.render(scene, camera);
  408.         }
  409.         function initStats() {
  410.             var stats = new Stats();
  411.             stats.setMode(0); // 0: fps, 1: ms
  412.             // Align top-left
  413.             stats.domElement.style.position = 'absolute';
  414.             stats.domElement.style.left = '0px';
  415.             stats.domElement.style.top = '0px';
  416.             document.getElementById("Stats-output").appendChild(stats.domElement);
  417.             return stats;
  418.         }
  420.         function createMaterial(vertexShader, fragmentShader) {
  421.             var vertShader = document.getElementById(vertexShader).innerHTML;
  422.             var fragShader = document.getElementById(fragmentShader).innerHTML;
  424.             var attributes = {};
  425.             var uniforms = {
  426.                 time: {type: 'f', value: 0.2},
  427.                 scale: {type: 'f', value: 0.2},
  428.                 alpha: {type: 'f', value: 0.6},
  429.                 resolution: {type: "v2", value: new THREE.Vector2()}
  430.             };
  432.             uniforms.resolution.value.x = window.innerWidth;
  433.             uniforms.resolution.value.y = window.innerHeight;
  435.             var meshMaterial = new THREE.ShaderMaterial({
  436.                 uniforms: uniforms,
  437.                 attributes: attributes,
  438.                 vertexShader: vertShader,
  439.                 fragmentShader: fragShader,
  440.                 transparent: true
  441.             });
  442.             return meshMaterial;
  443.         }
  444.     }
  445.     window.onload = init;
  446. </script>
  447. </body>
  448. </html>

线性几何体材质：

THREE.LineBasicMaterial

  1. // 调用gosper函数生成一个4阶，长度为60的Gosper曲线的点集
  2. var points = gosper(4, 60);
  4. // 创建一个新的THREE.BufferGeometry对象，用于存储线条段的几何数据
  5. var lineWidth = new THREE.BufferGeometry();
  7. // 创建一个空数组来存储颜色值
  8. var colors = [];
  10. // 初始化一个计数器变量i，用于跟踪当前处理的点的索引
  11. var i = 0;
  13. // 遍历points数组中的每个点
  14. points.forEach(function(e){
  15.     // 将每个点的坐标添加到LineSegments的顶点数组中
  16.     LineSegments.vertices.push(new THREE.Vector3(e.x, e.y, e.z));
  17.     
  18.     // 为每个点设置一个颜色值，这里使用白色作为基础颜色
  19.     colors[i] = new THREE.Color(0xffffff);
  20.     
  21.     // 根据点的x和y坐标计算HSL颜色值，并设置颜色
  22.     // x坐标除以100后加上0.5作为色相，y坐标乘以20后除以300再加上0.5作为饱和度，亮度固定为0.8
  23.     colors[i].setHSL(e.x / 100 + 0.5, (e.y * 20) / 300 + 0.5, 0.8);
  24.     
  25.     // 增加计数器i，以便为下一个点设置颜色
  26.     i++;
  27. });
  28. // 定义一个基本的线条材质，其中包含不透明度、线宽和顶点颜色的设置
  29. var material = new THREE.LineBasicMaterial({
  30.     opacity: 1.0, // 设置线条的不透明度为1.0（完全不透明）
  31.     linewidth: 1, // 设置线条的宽度为1
  32.     vertexColors: THREE.VertexColors // 启用顶点颜色，这意味着每个顶点可以有自己的颜色
  33. });
  35. // 将计算出的颜色数组赋值给LineSegments对象的colors属性
  36. LineSegments.colors = colors;

THREE.LineDashMaterial

在LineBasicMaterial的基础上有：scale（缩放dashSize和gapSize,scale < 1 dashSize和gapSize增大）；dashSize 虚线端的长度； gapSize虚线间隔的宽度

  1. const material = new THREE.LineDashedMaterial( {
  2.     color: 0xffffff,
  3.     linewidth: 1,
  4.     scale: 1,
  5.     dashSize: 3,
  6.     gapSize: 1,
  7. } );

标签： 材质 三维webGIS javascript
本文转载自: https://blog.csdn.net/Ian1025/article/details/144049316
版权归原作者 Ian1025 所有， 如有侵权，请联系我们删除。
登录后发布评论

“《Learn Three.js》学习（4） 材质”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。