jeromeetienne / threex.domevents

three.js extension which provide dom events inside your 3d scene.

Home Page:http://jeromeetienne.github.io/threex.domevents/examples/demo.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A crazy bug, maybe because of THREEx

opened this issue · comments

var container;
var camera, controls, scene, renderer, domEvents, light;
var SELECTED;
init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight , 1, 10000 );
  camera.position.z = 1000;

  controls = new THREE.OrbitControls( camera );

  scene = new THREE.Scene();

  scene.add( new THREE.AmbientLight( 0x505050 ) );

  light = new THREE.SpotLight( 0xffffff, 1.5 );
  light.position.set( 0, 0, 0 );
  light.castShadow = true;
  light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 50, 1, 200, 10000 ) );
  light.shadow.bias = - 0.00022;

  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;

  scene.add( light );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setClearColor( 0 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;
  // edit the object (after renderer)
  move_object = new THREE.TransformControls( camera ,  renderer.domElement);
  move_object.setSpace("world");
  scene.add(move_object);
  document.body.appendChild( renderer.domElement );
  window.addEventListener( 'resize', onWindowResize, false );
  // onclick
  domEvents = new THREEx.DomEvents(camera, renderer.domElement);
  var size = 10000 ;
  var step = 1000;
  var gridHelper = new THREE.GridHelper( size, step );
  scene.add( gridHelper );

}
function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}
// bind events
$("px").on("change",function(e) {
  SELECTED.position.x = e.target.value;
});
function animate() {

  requestAnimationFrame( animate );

  render();
}

function render() {

  controls.update();

  move_object.update();

  renderer.render( scene, camera );
}
function onClick(e){
  move_object.attach(e.target);
  SELECTED=e.target;
}
function lightOnClick(e){
  // because of the helper
  onClick({target: e.target.light});
}
function addBox() {
  var geometry = new THREE.BoxGeometry( 100, 100 ,100);
  var material = new THREE.MeshPhongMaterial({color: 0xffff00});
  var box = new THREE.Mesh(geometry,material);
  box.position.x = box.position.y = box.position.z = 0;
  box.position.x = Math.random()*1000;
  scene.add(box);
  var helper = new THREE.EdgesHelper( box, 0xffffff );
  helper.material.linewidth = 2;
  scene.add( helper );
  box.edges=helper;
  move_object.setMode("translate");
  domEvents.addEventListener(box,"click",onClick,false);
  domEvents.addEventListener(box,"touchstart",onClick,false);
  SELECTED = box;
  move_object.attach(SELECTED);
  SELECTED.type="Box";
}
function addLight() {
  var light = new THREE.SpotLight(0xffffff);
  light.position.x = light.position.y = light.position.z = 0;
  light.position.x = Math.random()*1000;
  scene.add(light);
  var helper = new THREE.SpotLightHelper( light, 0 );
  scene.add( helper );
  light.edges=helper;
  move_object.setMode("translate");
  domEvents.addEventListener(light.edges,"click",lightOnClick,false);
  domEvents.addEventListener(light.edges,"touchstart",lightOnClick,false);
  SELECTED = light;
  //whenAddObject(SELECTED);
  //SELECTED.type="Light"; /!\ default is SpotLight
}

I added box then add light, I clicked on the box and on the light helper. After clicking on the light helper, THREEx stopped working. It doesn't listen to any events anymore.