Mouse click not working in button

Questions
1

i am trying to add this code in my code where i want to have this button in my scene !

function performAnnotation(event: MouseEvent) {
    console.log(event)
    console.log('hello')
}
function loadAnnotationIntoScene() {
    const menuPanel = document.getElementById('menu-panel') as HTMLDivElement
    const _menuList = document.createElement('ul') as HTMLUListElement
    menuPanel.appendChild(_menuList)
    annotation.forEach((element, index) => {
        const myList = document.createElement('li') as HTMLLIElement
        const _list = _menuList.appendChild(myList)
        const myButton = document.createElement('button') as HTMLButtonElement
        myList.appendChild(myButton)
        myButton.classList.add('annotationButton')
        myButton.innerHTML = element['text']
        myButton.addEventListener('click', performAnnotation, false)
    })
}

i am trying to create an annotation menu above the scene in right or left hand side but i am not able to add button with event listener !!!

When i try in fiddle it works fine

but in three.js, it doesnot and i believe this is because of the orbitcontroller that i have in my scene !!

Right now my scene is like this:

image
image930×517 52.3 KB

can any one suggest me what is the best thing that i can do so that i can have annotation menu in my project !!!

2

@Pravin_Poudel As you said, it is working fine in fiddle, so I cannot figure out what causing this issue from your fiddle and provided code. Please provide fiddle with code in which you are getting error or relative code

3

i have controller in my project, do you think it should be working fine even with orbit controller?

4

If you setup correctly, I think it should not problem due to orbit controller.
and still you think orbit controller creating issue, try disabling it for testing purpose

5

I use the orbitControls plus good old fashioned HTML buttons in this example.
Annotations (sbcode.net)

image
image752×441 101 KB

6

Hi, i was following your code and it’s not working in my case !!

in my code i have done;

controls = new OrbitControls(camera, labelRenderer.domElement)

whereas, controller is not working with renderer.domElement like you did !!

I dont think i have much difference then your code !!

This is my code:

And, i am closely following your website and repo to learn three.js, thank you for making such an awesome resource to learn !!

do you think there is anything that i am doing wrong that i am not able to see even after reading same code for 5 hours !! :frowning:

7

image
image799×69 4.31 KB

The first issue I found, and I stop there, is that you don’t have a model named scene.gltf in the ./dist/client/models/drawing_room/ folder.

Look much more closely at my examples. Nothing is hidden from you.

  • There is a working JavaScript example, where you can view the complete un-obfuscated source code in one browser window. Press the <>
  • There is github repo. Instructions on the web page I linked already.

The examples I show, absolutely work. Whatever extra you do, is your responsibility. When you write code, change one thing at a time. If it breaks, then fix it before continuing onto the next change.

8

believe me i am totally following your code only !!!
That error is because there was no model in github repo because i included that in gitignore but now i have uploaded that in repo !!

It will work if you pull

Thank you so much for checking code

9

You’ve made quite a lot of additions to my example, and restructured it quite a lot, I don’t understand where your problems started.
But you can start again.
Do one thing at a time. And check it works, before continuing onto the next.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
git checkout annotations
npm install
npm run dev
10

For me to get your github main branch to work.
I had to change this

gltfLoader.setPath('./models/drawing_room/').load('scene.gltf', function (gltf) {

to this

gltfLoader.setPath('./models/').load('scene.gltf', function (gltf) {

and change this

    labelRenderer.setSize(window.innerWidth, innerHeight)
    labelRenderer.domElement.style.position = 'absolute'
    labelRenderer.domElement.style.top = '0px'
    document.body.appendChild(labelRenderer.domElement)
    
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
    
    controls = new OrbitControls(camera, labelRenderer.domElement) // (, html element used for event listener)

to this

    labelRenderer.setSize(window.innerWidth, innerHeight)
    labelRenderer.domElement.style.position = 'absolute'
    labelRenderer.domElement.style.top = '0px'
    labelRenderer.domElement.style.pointerEvents = 'none'
    document.body.appendChild(labelRenderer.domElement)

    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    controls = new OrbitControls(camera, renderer.domElement) // (, html element used for event listener)

And now when I press the buttons, I get the console log you added. And when I press the numbers in the 3d view, they also work.

image
image729×333 83.8 KB

I still think you need to go back and start from the beginning again. Your problems were self-inflicted by not checking your changes. And you seem to have some extra code in there that is trying to solve your problems. Like band-aids on band-aids.

And that 3d model is enormous to download.

11

Sorry, I criticise too much. Keep at it, it will be better than my example before you know it.

12

ohh i can’t believe it was the reason behind it :frowning:

No worry sir, your words are valuable to me and it’s because of you i am learning three.js in such a nice way only because of you.

Thank you so much for saving me here as well !!!

I was trying to replicate your way of thinking but missed small thing, i thought it is just to not make cursor pointer when hovered !!

1 Like