We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Add/Change Outline

Home › Forums › General Questions › Add/Change Outline

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • 2022-05-24 at 1:51 am #52324
    saalemv3d
    Participant

    Hi,

    I have the below material:
    const land = new THREE.MeshBasicMaterial({ color: 0xfcc61a });
    The above code only adds background color which is not my goal. I want to add outline/border around the material. I tried below codes but did not work:

    >> const land = new THREE.MeshBasicMaterial( { color: 0xfcc61a , wireframe: true, wireframeLinewidth: 4 } );
    >> const land = new THREE.MeshBasicMaterial( { color: 0xfcc61a , side: THREE.BackSide } );

    I want add an outline if material name matched. For example
    if (data.value.material_name== “Land”) {
    obj.material = land;
    } else {
    different outline should be applied
    }

    Btw, I tried v3d.apps[0].postprocessing.outlinePass.visibleEdgeColor = new v3d.Vector4(0,0,1,1) as well but it is not working outside PL.init function.
    Please take a look to the attached image for more illustrations.
    Anyone can help on this?

    Thank you

    Attachments:
    You must be logged in to view attached files.
    2022-05-25 at 3:52 pm #52412
    xeon
    Customer

    Could we get some detail on the functionality? Is this a highlight effect when a user rolls over or clicks on the parcel/object or is it something you are using to identify groups of objects such as sold parcels or available parcels?

    Then can we get some detail on how the object that is outline is created. Is it a separate object, is it a one plane with a map…. etc.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2022-05-26 at 2:21 am #52428
    saalemv3d
    Participant

    Thanks for the reply.

    Actually, there is an object with sold and available materials. There is an outline for double click on material (I added in verge3d) but I want add outline to group of materials (for example, group of available) when check box is is checked. My new function for adding outline is outside of the PL.init function. So, v3d.apps[0].postprocessing.outlinePass.visibleEdgeColor = new v3d.Vector4(0,0,1,1) cannot be used out of scope.

    2022-05-26 at 4:35 am #52429
    xeon
    Customer

    Well… I will have to look into how to do it on the JS side. If it can be done in puzzles we all know it can be done in JS for sure. Here is how I would do it in puzzles.

    If you dynamically create a list of the sold objects then you can just assign the list to a group called “sold”. Since this is a dynamic list it would update as needed. You would then just use the puzzle enable outline when needed.

    Attachments:
    You must be logged in to view attached files.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2022-05-26 at 6:42 am #52431
    xeon
    Customer

    The image shows the java script to control the outline colors.

    I commented out most of the stuff but you get the idea.

    Hopefully this will help you adapt it to your needs.

    Attachments:
    You must be logged in to view attached files.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2022-05-26 at 11:42 am #52439
    saalemv3d
    Participant

    Thank you for the reply. It is what I was looking for but I should do it in JS not puzzle.

    This code works when I use inside the runCode(app) function.
    I need to use it outside this function. Outside, does not recognized.

    2022-05-30 at 9:01 am #52506
    saalemv3d
    Participant

    Hey Xeon,

    I want to enable outline inside the runCode(app) function. How can I call correctly?
    appInstance.outline(test, ‘ENABLE’);

    function runCode(app) {
    appInstance.outline(test, ‘ENABLE’);
    app.scene.appInstance.outline(test, ‘ENABLE’);
    }

    The above lines give error (outline undefined).
    I am trying to enable outline inside runCode(app).

    Thanks in advance.

    2023-09-05 at 8:16 pm #66620
    calbrecht
    Customer

    Hi, how do I set the outline to be a solid line? Is it in the JS in the puzzle or in the CSS? Thanks

    2023-09-05 at 10:07 pm #66621
    xeon
    Customer

    Hi Calbrecht,
    Sorry for not seeing the earlier posts. I thought you were all good and stopped following.
    The outline for objects is setup in your 3D file. In Blender its in the Verge3D scene settings. Put a check mark next to “Outline Effect”, select your color, edge strenght, glow, pulse period and hidden edge color. Then when you use the Outline puzzle it will highlight as a solid line.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    2023-09-05 at 10:50 pm #66622
    kdv
    Participant
    saalemv3d wrote:

    I am trying to enable outline inside runCode(app).

    You are doing it in a little wrong way.

    const object = app.scene.getObjectByName('some_object_name');
if (object && object.isMesh && app.postprocessing.outlinePass)
  app.postprocessing.outlinePass.selectedObjects.push(object);

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.