Hello, i am trying to play with a model that i have in blender and i load to three.js with gltf format. i want to add interest points (like annotations) to some parts of the model that the user can interact . The user when clicks at a certain point then the camera makes the movement there and the screen crossfade to black and it is now 2D like a static page that you have information and possible you can even scroll vertically (camera controls now are disabled) If you close this information page then the camera reverts back to the model before the click. Can somebody give me info where to start from? Maybe it is not possible only with Three.js and need combination of other things?
A pure fantasy, based on your description:
Used Tween.js to move the camera between two points.
There are tons of topics and posts on how to use tween.js with three.js objects: Search results for 'tween.js camera' - three.js forum
3 Likes
Hello and thanks for the reply! I know already how to include tween.js and i am using on the annotations example. I want to adjust this HTML loading through .json file all my “content” of the annotation example and i would prefer to have something more three.js conroled, i am not sure if you understand.
Can i ask for a source code to have a look on your suggestion?
To make it more simple, what i want to know is how you loaded the content onclick on the points (Marker 1,2,3,5 etc) to start with!
Is it pure three.js or jquery something etc? Cause i am using a boilerplate exampe of this annotations (that has already model loading, tween and many three.js modules included or on demand but there are limitations (i am working through a client.ts and the pure index.html container is in another file so i cannot add jQuery inside this client.ts (or can i??)
Thanks!!
Here is my annotations three.js from GitHub - Sean-Bradley/Three.js-TypeScript-Boilerplate: Three.js TypeScript Boilerplate
I don’t use jQuery or Typescript there.
3 Likes
Interesting approach. I will have to study a lot and this is good, thank you very much!
1 Like
very difficult to adjust the code based on this example i am using from annotations:
https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/annotations/src/client/client.ts
I know i am asking too much but just for a starting point i want to understand how to load a 2D block that will cover the screen (like your example) when you press a sprite button instead of the annotations coming from the .json file and i have limitations to include other stuff inside.
If i will load the 2D block inside the main file i am working then i believe i will be able to make more nice things inside with the graphics , animations etc inside the 2D block.