About using three.js with ZIM

Questions
,
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

41

The difference is you are masking each object. I am masking the container that has the objects. I will try to mask each object.

42

The issue is the Blob. It won't clone it with the blob as the mask.

43

I have tried other stuff like fontloader, textgeometry, and find that they don't work under ZIM_THREE but if add threejs script tag, they work but now I have two imports of THREE. Is this the only way or how can we utilize other "addons" with ZIM's version of THREE and not have multiple imports of THREE?

44

Tell us what is missing and we may be able to add them in.

Use NPM to bundle any three.js stuff and ZIM stuff and the ZIM Three helper - @zimjs/three - npm

Or just use script tags for createjs, ZIM and three helper module rather than the single import.

<script src="https://zimjs.org/cdn/1.5.0/createjs.js"></script>
<script src="https://zimjs.org/cdn/017/zim_min.js"></script>
<!-- add your threejs libraries -->
<script src="https://zimjs.org/cdn/three_2.3.js"></script>
45

I get this. three_2.3.js:22 Uncaught ReferenceError: THREE is not defined

46

You need to add the script tag to the three.js file where it says to add your threejs libraries. I think that will automatically make a THREE reference.

47

I have tried a couple dozen variations of scripts and/or imports and nothing.

image
image1414×185 29.5 KB

I keep getting the same thing and the other error is Three is not defined.

48

I am using the TWEEN, TextGeometry, and FontLoader files.