How to use 3dmol.js in vue3 or react framework?

[ShangChien]

Hello seniors, I am new to front-end programming. Plan to make a molecular visualization web page. How to use 3dmol.js in vue3 or react framework, is there a template? any suggestions, thank you!

[dkoes]

Sorry, I don't have any examples. There is an outstanding but with 1.8 and vue.js (Issue #551). If you come up with a simple example of using vue.js with 3dmol.js I would really appreciate it so I can try and reproduce that issue.

[ShangChien]

I am a graduate student majoring in computational chemistry and not very good at web-programming. I am trying to embed 3Dmol in VUE in my spare time. But I'm mainly academic and probably won't spend a lot of my spare time on web-programming

[ShangChien]

By introducing jquery first, I was able to use 3Dmol to display molecules in vue. But still encountered some small problems:

1. When I drag the molecule in the window, occasionally an error will be reported in the chrome console(Mobile device adaptation mode)： Uncaught TypeError: Cannot read properties of undefined (reading 'pageX') at getX (3Dmol.js:39350:53)

2. When I am using the auto-rotation display parameter：3DmolVeiwer.spin('y',0.3), if I directly click on other route links, webgl will prompt many warnings: [.WebGL-0000038C2435DB00] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size [.WebGL-0000038C2435DB00] GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete My understanding is that the molecule rotates at the moment and webgl is working. When I click on other links, the front-end vue framework directly and rudely terminates the running of webgl, and does not stop running in an elegant way of webgl. I don't know much about webgl, wondering if 3Dmol has a related API for terminating rendering?

Appreciate any comments and suggention，thank you！

[dkoes]

I know nothing about vue. The first issue looks like a context menu event is being sent and doesn't look like a normal context menu event. The second is exactly what you describe. It seems like instead of removing the canvas vue is resizing it to zero.

[ShangChien]

I know nothing about vue. The first issue looks like a context menu event is being sent and doesn't look like a normal context menu event. The second is exactly what you describe. It seems like instead of removing the canvas vue is resizing it to zero.

Dear@dkoes ,thank you very much! I'll go ahead and provide a code example for using 3Dmol in vue if it goes well. At the same time I am also working on integrating rdkit.js in my code.

[wenhaoliang]

@ShangChien 您好，请问您现在在vue里可以是用3Dmol.js了吗

[ShangChien]

@ShangChien

您好，请问您现在在vue里可以是用3Dmol.js了吗

用是可以用，有些报错。我并不会处理。

[wenhaoliang]

@ShangChien 您好，请问您现在在vue里可以是用3Dmol.js了吗

用是可以用，有些报错。我并不会处理。

那请问是否可以借用下您的使用代码，我这里一直提示报错，连那个div都无法正常显示

[ShangChien]

@ShangChien

您好，请问您现在在vue里可以是用3Dmol.js了吗

用是可以用，有些报错。我并不会处理。

那请问是否可以借用下您的使用代码，我这里一直提示报错，连那个div都无法正常显示

下周上班我看看一起代码还在不在。不过我想知道您用3Dmol在网页展示分子是做网页应用吗？如果只是展示分子三维结构，也可以用ngl等其他库替代，但是我用ngl也遇到不会处理的报错。如果您是做网页化学信息应用，或许我们可以继续交流一下哈

[wenhaoliang]

@ShangChien

您好，请问您现在在vue里可以是用3Dmol.js了吗

用是可以用，有些报错。我并不会处理。

那请问是否可以借用下您的使用代码，我这里一直提示报错，连那个div都无法正常显示

下周上班我看看一起代码还在不在。不过我想知道您用3Dmol在网页展示分子是做网页应用吗？如果只是展示分子三维结构，也可以用ngl等其他库替代，但是我用ngl也遇到不会处理的报错。如果您是做网页化学信息应用，或许我们可以继续交流一下哈

那就太谢谢您了！目前我的需求是用网页展示分子的三维结构哈哈哈

[dkoes]

?

[ShangChien]

First，3Dmol.js is a good project for visualize chemical infor;mation of molecule, which has a dependency of jquery.js. Generally, it not recommend to use jquery in a virtual-dom framework. But if necessary you can still use it in vue. The key is properly import jquery in vue,some suggestionBut it may remain a conflict, which symbol $ in vue is used for marking variable to reactive. So it need to change another symbol to represent jquery in vue.