How to render clipped surfaces as solid objects

by

You want to render a clipped surface as if it were a solid — i.e., not hollow.

You can achieve that effect with MeshPhongMaterial — or any three.js material for that matter — with a simple hack to the material shader.

material.onBeforeCompile = function( shader ) {

    shader.fragmentShader = shader.fragmentShader.replace(

        '#include <output_fragment>',

        `
        vec3 backfaceColor = vec3( 0.4, 0.4, 0.4 );
        gl_FragColor = ( gl_FrontFacing ) ? vec4( outgoingLight, diffuseColor.a ) : vec4( backfaceColor, opacity );
        `
    )
};

This should look pretty good. It will require material.side = THREE.DoubleSide;

clipped torus

Alternatively, see https://threejs.org/examples/webgl_clipping_stencil.html.

three.js r.148

More Related Contents:

  1. Three.js – Orthographic camera
  2. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  3. Converting World coordinates to Screen coordinates in Three.js using Projection
  4. Three JS – Find all points where a mesh intersects a plane
  5. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  6. Three.js Projector and Ray objects
  7. Three.js add an object to a group but keep global position/rotation/scale as it was
  8. “Cross origin requests are only supported for HTTP.” error when loading a local file
  9. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  10. How to Fit Camera to Object
  11. THREE.js Ray Intersect fails by adding div
  12. How to rotate a 3D object on axis three.js?
  13. Thickness of lines using THREE.LineBasicMaterial
  14. Transparent background with three.js
  15. Three.js / WebGL – transparent planes hiding other planes behind them
  16. Is it possible to enable unbounded number of renderers in THREE.js?
  17. Rendering a transparent shell
  18. How do you save an image from a Three.js canvas?
  19. How to detect collision in three.js?
  20. Three JS Pivot point
  21. three.js transparent object occlusion
  22. How to change face color in Three.js
  23. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  24. How to get the global/world position of a child object?
  25. Orthographic camera and selecting objects with raycast
  26. catch the click event on a specific mesh in the renderer
  27. Antialiasing not working in Three.js
  28. 3D point rotation algorithm
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Apply color gradient to material on mesh – three.js

Leave a Comment