56301

Three.js - Drag Collada Files

Question:

My objects are moving on the XZ axis through drag and drop.

Unfortunately the collada files doesn't act like them...

Here is my code:

var container; var camera, controls, scene, renderer; var objects = [], plane; var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(), offset = new THREE.Vector3(), INTERSECTED, SELECTED; init(); animate(); function init() { container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.y = 50; camera.position.z = 200; controls = new THREE.OrbitControls( camera, container ); controls.rotateSpeed = 2; controls.zoomSpeed = 2; // controls.panSpeed = 3; controls.noZoom = false; // controls.noPan = false; controls.staticMoving = true; controls.dynamicDampingFactor = 0.3; controls.maxPolarAngle = Math.PI/2.0; scene = new THREE.Scene(); //LIGHTS [...] //DAT.GUI settings var gui = new dat.GUI(); [...] //Plane as Ground (called floor) floor = new [...] plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000, 5, 5 ), new THREE.MeshBasicMaterial( { visible: false } ) ); plane.applyMatrix(new THREE.Matrix4().makeRotationX( -Math.PI / 2)); scene.add( plane ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setClearColor( 0xf0f0f0 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.sortObjects = false; renderer.setClearColor( 0x272727, 1); // Couleur de fond renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFShadowMap; //Shadows [...] container.appendChild( renderer.domElement ); renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ); renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ); renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ); window.addEventListener( 'resize', onWindowResize, false ); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { event.preventDefault(); // The following will translate the mouse coordinates into a number // ranging from -1 to 1, where // x == -1 && y == -1 means top-left, and // x == 1 && y == 1 means bottom right mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); if ( SELECTED ) { var intersects = raycaster.intersectObject( plane ); if ( intersects.length > 0 ) { SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) ); } return; } var intersects = raycaster.intersectObjects( objects ); if ( intersects.length > 0 ) { if ( INTERSECTED != intersects[ 0 ].object ) { if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex ); INTERSECTED = intersects[ 0 ].object; INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); plane.position.copy( INTERSECTED.position ); // plane.lookAt( camera.position ); } container.style.cursor = 'pointer'; } else { if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex ); INTERSECTED = null; container.style.cursor = 'auto'; } } function onDocumentMouseDown( event ) { event.preventDefault(); raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( objects ); if ( intersects.length > 0 ) { controls.enabled = false; SELECTED = intersects[ 0 ].object; var intersects = raycaster.intersectObject( plane); if ( intersects.length > 0 ) { offset.copy( intersects[ 0 ].point ).sub( plane.position ); } container.style.cursor = 'move'; } } function onDocumentMouseUp( event ) { event.preventDefault(); controls.enabled = true; if ( INTERSECTED ) { plane.position.copy( INTERSECTED.position ); SELECTED = null; } container.style.cursor = 'auto'; } // function animate() { requestAnimationFrame( animate ); render(); } function render() { controls.update(); renderer.render( scene, camera ); } //First Object Adding and acting as wanted [...] //Second Object Adding and acting as wanted [...] var aLamp = document.getElementById("addLamp"); aLamp.addEventListener("click", addLamp, false); function addLamp(){ // //COLLADA IMPORT var loader = new THREE.ColladaLoader(); loader.options.convertUpAxis = true; loader.load( './models/collada/misc/lamp.dae', function ( collada ) { var dae = collada.scene; var skin = collada.skins[ 0 ]; dae.position.set(0,0,0); //x,z,y dae.scale.set(10,10,10); daemesh = dae.children[0].children[0]; daemesh.castShadow = true; daemesh.receiveShadow = true; objects.push( dae ); scene.add(dae); }); }

In fact, I can't select the colladas and moving them.

Somebody knows where the problem(s) is/are ?

Thank you :D

Answer1:

Solution with eventcontrols ( example <a href="http://alexan0308.github.io/threejs/examples/controls_events_loaders.html" rel="nofollow">http://alexan0308.github.io/threejs/examples/controls_events_loaders.html</a> )

<script src="js/controls/EventsControls.js"></script> EventsControls2 = new EventsControls(camera, renderer.domElement); EventsControls2.map = checkerboard; EventsControls2.attachEvent('mouseOver', function() { this.container.style.cursor = 'pointer'; }); EventsControls2.attachEvent('mouseOut', function() { this.container.style.cursor = 'auto'; }); EventsControls2.attachEvent('dragAndDrop', function() { this.container.style.cursor = 'move'; this.focused.position.y = this.previous.y; }); var loader = new THREE.ColladaLoader(); var Scale = new THREE.Vector3(20, 20, 20); EventsControls2.scale.copy(Scale); EventsControls2.offsetUse = true; loader.options.convertUpAxis = true; loader.load('models/monster/monster.dae', function(collada) { var dae = collada.scene; dae.position.set(0, 0, 0); dae.scale.set(1 / Scale.x, 1 / Scale.y, 1 / Scale.z); dae.updateMatrix(); scene.add(dae); EventsControls2.attach(dae); });

Recommend

  • THREEjs can't use the material on the JSON Model when initializing. Gives me WebGL errors
  • THREE.js Texture is not visible with SVGRenderer
  • ImageUtils.loadTexture with callback in Canvas Renderer
  • three.js 2D mouseclick to 3d co-ordinates using raycaster
  • Mesh function seems to swap x and y values
  • Polyfit for two variables
  • Getting an {“isTrusted”:true} error when using GLTFLoader
  • Three.js Loader callback issues in loop - only receive last value?
  • Effect of `USE` on performance
  • Can multiple WebGLRenderers render the same scene?
  • How do I add a 2D Plot along with a surface or mesh plot in MATLAB?
  • Load and display obj model on the scene with FastObjImporter
  • How can I plot a function with two variables in octave or matlab?
  • store old values FiPy
  • Mapbox: Get loaded tile coordinates? [closed]
  • How do I add a 2D Plot along with a surface or mesh plot in MATLAB?
  • How to add outline on child mesh in three js
  • Representing a LiDAR surface using the 3D Delaunay Triangulation as basis?
  • Tween JS basics on three JS cube
  • Three.JS- Detecting intersection in Collada (Ray Casting)
  • Shading of a plane
  • How to do occlusion with Google Tango in Unity?
  • Transparency within instanced shapes
  • Generate stl mesh from csv
  • QML apply a texture to a Mesh
  • Camera-Offset | Project Tango
  • Texture issue while using THREE.TextureLoader over deprecated THREE.ImageUtils.loadTexture
  • Moved coordinates of the scene when DOM element with renderer is not at the top of the screen
  • Oracle SQL - Generate and update a column with different random number in every row
  • Create recursive binary tree?
  • ONLY Visible Div form elements will get submitted
  • How to know if a JFrame is on screen in a multi screen environment
  • Consuming a web service with the Netbeans Platform
  • Accessing another variable in the same class with a click event
  • Why can't UI components be accessed from a backgroundworker?
  • How to getText() from the input field of an angularjs Application
  • android google indoor map
  • CakePHP 2.0.4 - findBy magic methods with conditions
  • Date difference with leap year
  • Converting MP3 duration time