Transparency

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.4.0/Tween.min.js"></script>
<div id="buttons">
  <button id="showOn">
    On
  </button>
  <button id="showOff">
    Off
  </button>
</div>

CSS

body {
  overflow: hidden;
  margin: 0;
}

#buttons {
  position: absolute;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({
  color: "red",
  transparent: true,
  opacity: 0
}));
cube.visible = false;
scene.add(cube);

showOn.addEventListener("click", function(event) {
	cube.visible = true;
  var tweenon = new TWEEN.Tween(cube.material).to({
    opacity: 1
  }, 2000).
  onComplete(function(){
  	cube.material.transparent = false;
  });
  tweenon.start();
});

showOff.addEventListener("click", function(event) {
	cube.material.transparent = true;
  var tweenoff = new TWEEN.Tween(cube.material).to({
    opacity: 0
  }, 2000).
  onComplete(function(){
  	cube.visible = false;
  });
  tweenoff.start();
});

render();

function render() {
  requestAnimationFrame(render);
  TWEEN.update();
  renderer.render(scene, camera);
}