About using three.js with ZIM

Questions
,
21

Did it! So there were two lines expecting a touches[1] which would be at least two touches 0 and 1 - well, I guess mobile is not using the touches as expected so just commented those out - they were from early ZIM time with orbitcontrols. And now it works. You will need to clear your cache - but ZIM 017 ZIM_three now brings in the patched orbitcontrols.

We tested in TextureActive, three.js inside ZIM and raw three.js and the orbitcontrols works in all three places so probably are good.

This is a good improvement and we will encourage people to update to 017 for proper zooming on mobile. Will post about it after we update ours and make sure it is all working.

22

Yes, the one I tested now does zoom in. Thank you very much.

1 Like
23

I want to ask if one last thing is possible on this subject: can ZIM elements be on top of threejs elements?

When I want to use it as responsive, I add ZIM objects to the stage. If I add the threejs size to the entire stage, ZIM objects are not visible. If I use ortho with hud, this time ZIM objects are not responsive.

24

You can only interact with one or the other if the two canvases are over top of one another. so yes, you can put ZIM on top but then you can't interact with three.js. Unless you use TextureActive with the HUD format. I would not say, when using the HUD, that the ZIM objects are not responsive. They are on three.js surfaces. You have to make the three.js surfaces responsive. That would be zoom and position then relative to window size, etc. We have positioned them responsively, but did not zoom them. You can zoom them, you just have to do it.

25

Here is an example - sort of works

https://zimjs.com/015/hud.html

image

1 Like
26

image
image515×764 42.5 KB

image
image731×440 51.4 KB

it works partially. it doesn't work for vertical screen. it works for horizontal screen.

F.on("resize", ()=>{
// I am really not sure what to put here
const scale = window.innerHeight / 500
HUD_panel.scale.set(scale,scale)
HUD_panel.pos(35,35,RIGHT,TOP,500)
})
const scale = window.innerHeight / 500
what is 500 here?

HUD_panel.pos(35,35,RIGHT,TOP,500) Also pos 5. value is mentioned as container in ZIM documents.

27

Yes - did not test it for vertical - will you have enough room to do what you are doing in vertical? Or would you change the layout to a bottom menu? That, I call adaptive, when you change layouts / add or remove things.

28

Actually, you're right, landscape mode is better. I'll use it like this for now. Thank you for your help.

1 Like
29

Trying to use bufferGeometry, I keep getting an error. Is it possible to add additional threejs features?

30

Make sure to import ZIM_three - then:

const geometry = new THREE.BufferGeometry()

works for me. What else are you trying to do? Perhaps show some code.

31
32

What about THREE.PlaneBufferGeometry()?

33

That is just PlaneGeometry now...

1 Like
34

I am masking a tile with a blob and it's slowing down the THREE scene. If I add a cache, it works but messes click events on the container. Any ideas?

35

Is this on a TextureActive? Any clicks on lots of tile elements should be done with hitTestGrid(). If you do not need interaction on the tile elements or on labels, etc. then use noMouse() no them. Also see https://forum.zimjs.com/t/optimizing-zim

1 Like
36

I am trying to clone a container that has other stuff that is masked. When I clone it the mask doesn't clone. The stuff gets cut at the container boundry without the mask? Any ideas? Thanks

37

Yes... in general clone() is not deep like that. Just build it in a function for instance... and call the function when you need a copy.

38

The challenge of that I need an exact copy of the container. I am generating dynamic objects for a memory game so I need two to be the same. I found a post where you suggested using alpha effect. I will try that. Thanks

39

I just tried it and clone() did also close the mask - so sorry about the bad advice.

So what did you do differently? And is this for a TextureActive?

40

Yes, I am trying to mask random patterns using an egg shaped blob. I created a memory game in TextureActive.

I can mask them fine but can't clone them. I will mess with it later tonight. Thanks