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

Kumar_Baidyanath · November 24, 2018, 6:47am

apply_texture

Mugen87 · November 25, 2018, 2:40pm

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.

Kumar_Baidyanath · November 26, 2018, 7:53am

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

Mugen87 · November 26, 2018, 10:31am

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

prisoner849 · November 26, 2018, 11:39am

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

Kumar_Baidyanath · November 26, 2018, 1:21pm

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

Kumar_Baidyanath · November 26, 2018, 1:24pm

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

Mugen87 · November 26, 2018, 1:54pm

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

Kumar_Baidyanath · November 26, 2018, 2:23pm

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

Kumar_Baidyanath · November 27, 2018, 7:36am

Hi Michael,

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

Thanks and Regards
Baidyanath

Brabbit_640 · November 27, 2018, 4:09pm

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

Mugen87 · November 27, 2018, 4:18pm

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

No.

Kumar_Baidyanath · November 28, 2018, 7:57am

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

Kumar_Baidyanath · November 28, 2018, 11:05am

Hi Michael,

I have worked on below mention page:

github.com

bdbharti77/3dbuilder/blob/master/editor/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Audax 3D Builder</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta http-equiv="cache-control" content="max-age=0" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
		<meta http-equiv="pragma" content="no-cache" />
	</head>
	<body ontouchstart="">
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


		<link href="css/main.css" rel="stylesheet" />
		<link id="theme" href="css/light.css" rel="stylesheet" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="../build/three.js"></script>

This file has been truncated. show original

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

Kumar_Baidyanath · November 29, 2018, 2:18pm

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

Kumar_Baidyanath · March 14, 2019, 5:23am

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; }

Senior_Developer · November 18, 2020, 3:04pm

Hi, Kumar.
I can’t find your code here.

Could you let me know your current repo?
It would be really appreciated.

Topic		Replies	Views
Drag and drop texture library Jobs	3	1591	April 20, 2020
Moving an OBJ via drag and drop Questions drag-controls	19	8182	June 10, 2021
Raycaster intersectsObjects return empty array while dragging an image onto the Object Questions textures	2	1476	March 21, 2020
Dragging fabricjs object from threejs object Questions textures , materials	0	606	November 5, 2021
Texture Loading uploading src on drop or input type file Questions textures	5	2020	May 3, 2021

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

Drag Textures

Related topics