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.