Three. The material of js

This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

Material (Material)

Three. Js document

Material refers to what texture an object looks like. Material can be seen as a combination of material and texture. In rendering programs, material is the combination of visual properties of a surface, such as color, texture, smoothness, transparency, reflectivity, refractive index, luminescence, etc. It is these properties that allow us to identify what the model in 3d is made of, and hence the model material. The Material() method in three.js creates a generic Material. It lists all the common properties, and all other material types inherit the following properties and methods (although they may have different default values).

attribute

The Material attribute mainly contains:

  • Shading: Shading, Wireframe, Side, vertexColors, Fog
  • Blending properties (how to blend with background): Blending, blendSrc, blendDst, blendEquation…
  • DepthTest attributes: depthFunc, depthTest, depthWrite
  • Template test properties: stencilFunc, stencilWriteMask, stencilRef, stencilFuncMask…
  • Clipping properties: clippingPlanes, clipIntersection, clipShadows
  • Other properties: precision(shader precision), polygonOffset(polygonOffset, handle z-fighting), dithering(color jitter, get extra color information, handle serrations)

Clipping property of three.js

Threejs’s Plane constructor Plane allows you to create several Plane objects for cutting models. Then assign the set of planes to the.clippingPlanes property of the three. js material object.

In addition to setting the.clippingPlanes property of the WebGL renderer object, you also need to set the.localClippingEnabled property of the WebGL renderer. Let’s take a look at the clipping properties of three.js in code.

code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title> </title> </head> <body> <script SRC ="./three.js"></script> <script> var clipPlane = [// yoz Plane cut new three.plane (new three.vector3 (1, 0, 0), 0), new THREE.Plane(new THREE.Vector3(0, -1, 0), 0), new THREE.Plane(new THREE.Vector3(0, 0, -1), 0), ]; var scene = null; var camera = null; var renderer = null; var sphere = null; Function init () {scene = new three.scene (); // PerspectiveCamera = new THREE.PerspectiveCamera(45, window.innerwidth/window.innerheight, 10, 1000); camera.position.z = 50; Renderer = new THREE. Renderer({antialias: If true, / / alpha anti-aliasing: true, / / canvas is transparent premultipliedAlpha: false, / / in advance by the transparency, the default open}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.localClippingEnabled = true; document.body.appendChild(renderer.domElement); sphere = createSphereGeometry(10); scene.add(sphere); animate(); } function createSphereGeometry(len) {var group = new three.group (); // Add geometry for (var I = 0; i < len; i ++) { var sphereGeometry = new THREE.SphereGeometry( i / 2, 32, 32 ); Var Material = new THREE.MeshBasicMaterial({color: RGB (51, 51, 51); New three.color ().sethsl (math.random (), 0.5, 0.5), clipIntersection: true, clippingPlanes: clipPlane, side: THREE.DoubleSide, }); Var sphere = new THREE.Mesh(sphereGeometry, material); // Place the grid structure in the scene group.add(sphere); } return group; } var deg = 0; Function animate() {requestAnimationFrame(animate); deg += 1; Camera. Position. set(50 * math.cos (deg * math.pi / 180),0,50 * math.sin (deg * math.pi / 180)); Sphere. Rotation. + z = 0.1; camera.lookAt(new THREE.Vector3(0, 0, 0)); renderer.render(scene, camera); } init(); </script> </body> </html>Copy the code