three.js box geometry opacity - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

three.js box geometry opacity

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Three.js r69 Basic box example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://threejs.org/examples/js/libs/stats.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script> 
      <style id="compiled-css" type="text/css">

html, body {
   padding:0px;
   margin:0px;
}
canvas {/*  w w  w .ja  v  a  2  s. c o  m*/
   width: 100%;
   height: 100%
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
    renderer = new THREE.WebGLRenderer({ canvas: can1, antialias: true, alpha:true, precision:'highp' });
    renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0xAAAAAA);
     renderer.sortObjects = true;
/
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, -100, 100);
    camera.position.z = 180;
    scene = new THREE.Scene();
     cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(100, 100, 100),
    new THREE.MeshBasicMaterial({
        color: 0xffffff,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));
    cube1.position.set(0,0,-10);
    scene.add(cube1);
    //
     cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(50, 50, 50),
    new THREE.MeshBasicMaterial({
        color: 0x000000,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));
cube2.position.set(0,0,-10);
    scene.add(cube2);
    window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
    requestAnimationFrame(animate);
    cube1.rotation.x += 0.005;
   cube1.rotation.y += 0.01;
    cube2.rotation.x += 0.010;
   cube2.rotation.y += 0.01;
    renderer.render(scene, camera);
}
    }

      </script> 
   </head> 
   <body> 
      <canvas id="can1" width="500" height="500" style="width:500px;height:500px"></canvas>  
   </body>
</html>

Related Tutorials