Rendering transparent mesh with overlapping triangles in Three.js - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

Rendering transparent mesh with overlapping triangles in Three.js

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from ww w  .  j av  a2  s. co  m
var camera = new THREE.OrthographicCamera(0, 400, 0, -400, -100, 100);
camera.position.set(-10, 10, 0);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( {  canvas: document.getElementById('canvas')} );
geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2,
    depthFunc: THREE.LessDepth
});
    mesh = new THREE.Mesh( geometry, material );
    geometry.vertices.push(new THREE.Vector3(100, 0, 1));
    geometry.vertices.push(new THREE.Vector3(0, -200, 1));
    geometry.vertices.push(new THREE.Vector3(200, -200, 1));
    geometry.vertices.push(new THREE.Vector3(0, 0, 1));
    geometry.vertices.push(new THREE.Vector3(200, 0, 1));
    geometry.vertices.push(new THREE.Vector3(100, -200, 1));
    geometry.faces.push(new THREE.Face3(0,1,2));
    geometry.faces.push(new THREE.Face3(3,4,5));
scene.add(mesh);
renderer.render(scene, camera);
    }

      </script> 
   </head> 
   <body>  
      <canvas id="canvas"> 
      </canvas>   
   </body>
</html>

Related Tutorials