Create a note field on the scene to make notes of the model

Questions
,
1

Is it possible to create a notes field to make notes about the model which is described ?. Based on the gui button pressed, a notes field should be opened and that is able to enter some texts. Is it possible?

2

https://www.w3schools.com/jsref/met_win_prompt.asp

So something like this (untested, as usual):

let note = "Write here. This is the initial text.";
const clickableFunctions = {
    editNote: function() {
        note = window.prompt("Edit your note:", note);
        //Do something with the value. e.g.:
        console.log(note);
    }
}

const gui = new dat.GUI();
gui.add(clickableFunctions, "editNote").name("Edit note");

Edit: It works as expected: https://jsfiddle.net/xg5q63dw/

1 Like
3

Thank you so much @EliasHasle. :blush:

4

Is there any possibilities for made it as multi line format? @EliasHasle

5

Not using Window.prompt, I believe. But you can make a custom text area that is hidden until a user clicks a certain button (or better, clicks the model), and gets loaded with the right text before it is shown to the user, and saves the text in the right place when the user has written in it and clicked a “Save” button. Check out HTML input elements and events. And the style setting visibility:hidden.

https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/tags/tag_textarea.asp
https://www.w3schools.com/cssref/pr_class_visibility.asp

Except for the mention I made of clicking the model, this is all unrelated to three.js, so I suggest you check with the experts elsewhere for more help on dynamic HTML and CSS.

1 Like
6

Thanks a lot @EliasHasle for your kind reply.