How to apply textures on object by drag texture on object form list of texture on specific panel

textures

#1

How to apply textures on object by drag texture on object form list of texture on specific panel


#2

I would break this task down into multiple parts:

  • First, you should try to implement a basic mouse interaction with raycasting. The goal is to implement an interaction like shown in this example. It should be possible to select or highlight the individual parts of your object. I think you can use most of the code from the linked demo. BTW: Raycasting also works with multi-material meshes.

  • Next, you should implement the object configuration but without drag’n’drop. The idea is to just select a texture from a panel and when clicking on an object, the respective material is changed.

  • When all this works, you can try to introduce a drag’n’drop interaction.


#3

Thanks for you response @Mugen87,
I am able to change texture on click event on selected object using below mention function:

function setMat(evt) {
  var src = evt.target.src ? evt.target.src : evt.target.children[0].src;
  new THREE.TextureLoader().load(src, (tex) => {
        var child = editor.selected;
        tex.wrapS = THREE.RepeatWrapping;
        tex.wrapT = THREE.RepeatWrapping;
        tex.repeat.set( 1, 1);
  if ( editor.selected ) {
      child.material = new THREE.MeshLambertMaterial( {  
          transparent: true,
          map: tex
       } );
      }
  });

}

but i am not able to work on drag texture form list and drop in specific panel of object.
Please help me to resolve the issue, if you have any working example please share.

Thanks
Baidyanath


#4

How about sharing your current progress as a live example. Maybe as an editable fiddle?


#5

@Kumar_Baidyanath
Possibly, you’re looking for something like that:
https://www.w3schools.com/howto/howto_js_draggable.asp


#6

Thanks for your response @prisoner849 ,

But i am not looking for drag and drop feature like url you have share.
@Mugen87 - Has shared good idea about solution, i have tried that, but i am not able get. “raycasting object”, current drag and drop working on “editor.selected” object but i need drooped object to apply texture

Thanks
Baidyanath


#7

Thanks @Mugen87,

i have tried to get raycasting object, but i am not able get. “raycasting object”, current drag and drop working on “editor.selected” object but i need drooped object to apply texture.

Thanks for your support.

I am not able to setup entire code on fiddle:

I have used below updated code for drag and drop:

raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
     
     if ( intersects.length > 0 ) {

      if ( INTERSECTED != intersects[ 0 ].object ) {
        INTERSECTED = intersects[ 0 ].object;
      }

    }

Thanks
Baidyanath


#8

The code snippet is not really helpful to solve your issue. Without a fiddle it will be hard to provide more feedback.


#9

Hi @Mugen87,

I am sharing dev url with you please have a look if that work.
https://audaxlabs.com/3DBuilder/editor/

Fiddle is bit hard to set because there is many js file to include and “FBX” and texture png as well.

Thanks
Baidyanath


#10

Hi Michael,

Can we export scene in these - “SKP, DWF, DWG, DXR, RVT” format form editor.

Thanks and Regards
Baidyanath


#11

Hi,
This is off topic. Sorry if I’m breaking any forum rules.
I’ve faced this difficulty as well with linking assets other than js to the code. Is there any place we can upload the assets (objects, texture files, etc…) and get direct link to them?

Thank you


#12

@Brabbit_640 You can upload your stuff to github and then use https://raw.githack.com/ in order to link to files.

No.


#13

Hi Michael,

I have publish my code on git, please have a look below mention url:

How to apply textures on object by drag and drop texture on object form list of texture on specific object from group of object.

Thanks
Baidyanath


#14

Hi Michael,

I have worked on below mention page:

For texture change i have written function in “Fabric/texture.js” this file.
Please have a look if you can help me to resolve the issue, as i am new in THREEJS.

Thanks
Baidyanath


#15

Hi @Mugen87 ,

Can you please suggest me on above issue. that will be really helpful for me.
I am still stuck on same.

Thanks
Baidyanath


#16
three.js webgl - animation - skinning body { background-color: #ffffff; margin: 0px; color: #fff; overflow: hidden; }
        #texture {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 5%;
            top:50%;
            cursor: pointer;
        }

    </style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="three.js"></script>
<script src="Detector.js"></script>
<script src="inflate.min.js"></script>
<script src="OrbitControls.js"></script>
 <script src="TransformControls.js"></script>
<script src="FBXLoader.js"></script>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Play:700,400' type='text/css'>
  
<script> 
    function drag(event) {
            window.texture = event.currentTarget.src;
           console.log(texture);
  }

</script>
<script>

// $(function(){
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

/*global variables*/
var scene, camera, renderer, light, orbit;

// var mouse = new THREE.Vector2();
var controls;

var SCREEN_WIDTH, SCREEN_HEIGHT;
var loader, model;
var raycaster;
var texture;
var textureToLoad;
var objects = [];
var object = [];
var INTERSECTED;

var container;
/* ---------------------------------------------------------------------------------------------------------*/

/* rendering the jet engine */
function init(){
    container = document.createElement( 'div' );
			container.classList.add("editor");
			document.body.appendChild( container );
    /*creates empty scene object and renderer*/
    scene = new THREE.Scene();
    scene.position.set(0,0,0);
    scene.background = new THREE.Color( 0xcccccc );
    /* initialize camera object */   

    camera = new THREE.PerspectiveCamera( 50, 1, 0.01, 10000 );
    camera.position.set( 10, 10, 300 ); 
    camera.lookAt(scene.position); 
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setClearColor (0xffffff, 1);

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled= false;
    renderer.shadowMapSoft = false;

container.appendChild( renderer.domElement );

    light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
    light.position.set( 0, 2000, 0 );
    scene.add( light );

    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 10, 2000, 100 );
    
    scene.add( light );
    
    /*add controls*/
    controls = new THREE.OrbitControls( camera, renderer.domElement );    

    raycaster = new THREE.Raycaster();

    textureToLoad = new THREE.TextureLoader();

    function onShowModel() {
    
        var manager = new THREE.LoadingManager();
        var loader = new THREE.FBXLoader(manager);
        loader.load( 'models/framewall.fbx', function ( model ) {
          
           model.scale.set(70, 70, 70);
           model.position.set(0, -25, 0);

           
			  scene.add( model );

        } );
    }

    onShowModel();

//document.addEventListener( ‘customdrag’, customdrag, true );
$("#webGL-container").append(renderer.domElement);

}

document.addEventListener(“dragend”, customdrag, true);

    function customdrag( event ) {  
        
         var tex = window.texture;

    var src = textureToLoad.load(tex);

    camera.updateMatrixWorld();
        event.preventDefault();
        var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,   
                                -( event.clientY / window.innerHeight ) * 2 + 1,  
                                0.5 );     
        var raycaster =  new THREE.Raycaster();                                        
       raycaster.setFromCamera( mouse3D, camera );
        var intersects = raycaster.intersectObjects( scene.children, true );

console.log(intersects)
if ( intersects.length > 0 ) {
// intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

          src.wrapS = src.wrapT = THREE.RepeatWrapping;
        src.repeat.set( 25, 25);

        intersects[ 0 ].object.material = new THREE.MeshLambertMaterial( {  
        
            transparent: true,
            map: src,
     
        } );
        }
    }




function onDragOver(event) {

    var tex = window.texture;

    var src = textureToLoad.load(tex);

    camera.updateMatrixWorld();

    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse.z=-1;

    raycaster.set( mouse,camera.position);
    var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(raycaster.ray.origin);
    geometry.vertices.push(raycaster.ray.direction);
    var line = new THREE.Line( geometry, material );
    scene.add( line );


    var intersects = raycaster.intersectObjects(scene.children[2], true);

    // if (intersects.length > 0) {
        console.log("intersected");
        src.wrapS = src.wrapT = THREE.RepeatWrapping;
        src.repeat.set( 25, 25);

        scene.children[2].children[3].material = new THREE.MeshLambertMaterial( {  
        
            transparent: true,
            map: src,
     
        } );
    // }   
    
}





function render() { 
    controls.update();
}

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

init();
animate();

//});



Drag Textures



#texture ul{ margin:0px; padding:0px; list-style:none; } #texture ul li{ margin:0 0 5px 0; }