I want to view the objects in scene, and there properties.
or, find where is position of a object in scene.
or, which object is at the position.
A debug mode or layer is not supported by three.js. But there are some external tools e.g.:
thanks 
I’v tried this tool, the experience is not very well.
1 Like
Do we know of other debugging tools for Three.js today than just the Three.js inspector in Chrome Devtools?
I’ve created a list of known WebGL debuggers on 📕 Three.js Bookshelf
1 Like
It’s been 6 years and it still doesn’t exist. I made a simple debugging tool based on my business
it exists https://triplex.dev
this is more than a debugging tool, it writes changes made in the live editor back into your code, which is its source of truth. you can also build the whole experience in it and let it write code from scratch. changes made to code are immediately reflected in the live editor.
1 Like
it looks ok, but if I want to use it in HTML or Vue or angular, not only react
then you’re out of luck i suppose. in order to use code as the source of truth you need a principled environment. it would be practically high magic if an editor could do what triplex does in vanilla. i just wanted to say, it exists, and it surpasses what editors have done in the past.
as for a runtime debug environment that shows you the scene and lets you change stuff, personally i don’t see the point. you change stuff but now what, nothing will have relevance outside editor. same with three editor, blender, maya, there is no hand-off between the project and the editor. that’s imo the most important aspect of what an editor should do, but that’s off topic i guess.
my idea is that Threejs parasitizes the web, and its applications should be universal. The development mode is completely different from Unity or UE, otherwise I would develop applications directly using Unity faster. Currently, there are many projects running and debugging environments in browsers, which may be independent and complete 3D projects, or just embedded feature points. They may rely on HTML or front-end frameworks like React and Vue, and the demand for these projects is very large. Threejs has a popular history of more than ten years, but there is no easy-to-use debugging tool. It is a bit strange that I can only develop debugging tools myself, but it is limited. At the level of proficiency, there are few functions, but in my company, the efficiency of use is very high
Ok, but a bit from a different perspective - debugging of what? Three.js is a library, not an editor, not an engine like UE or Unity. Three.js is virtually just an API abstraction around WebGL - it doesn’t serve any debuggable features in general - and for the few things you could consider debuggable, there’s usually helpers (ex. for shadow camera, box3, etc etc.)
Which part of three you’d like to be debugging? For performance and memory - there’s chrome devtools. All else is pretty much your custom code, so you’ll need to create your own custom debugging tools 
?
2 Likes
yes, it is actually similar to the function of the editor. I can view the parameters and states of the model material or other things while running the code, so that I can know the actual effect of my code, and the actual impact on the model parameters, of course, it is difficult to do this in the browser environment. our company’s team has realized part of the function in the chrome extension, but it is not enough,we may need more mature tools to do this
The difference is UE and Unity don’t have anything outside of their own scope.
You can do just about anything in the chrome debugger.
I think what you’re after is a user friendly GUI that only looks at the three component of your page?
Would only be useful for the very simplest of scenes/projects.
If you want to do live editing of lights, for example, make a simple gui and add to your project for just that.
The dev tools have a ton of features for debugging and profiling.
You can change your code and save it back to your project. (admittedly I only ever use that for CSS)
Plus you then only have one panel to debug ALL your code.
1 Like
I write almost 100% of my code directly in the chrome debugger. And yea… it is a great debugging tool.
same idea, it is a gui that contains most of the components in threejs. You can view their status and data in real time and modify them at the same time, like done in a traditional game engine
If us directly use the chrome debugger console to print parameters, it will be a very boring and repetitive operation. When multiple different components interact with each other, it will be a disaster.
I almost never console.log. I just put a breakpoint and hold the mouse over the variable I want to view. If there is a more complex issue, I usually single step through it… or I put a breakpoint in the renderloop, then mouseover “scene” and click/drill through it. It’s really not too bad. Very much like any “object inspector” in any app. If you want an actual object inspector in the page, you can build your app around the threejs editor. three.js editor then you can save/load/edit all that jazz like it was some kind of document. It can also export/import a standalone zip of your app, or export components in various formats.
ok, I’ll use it as a reference for development, thx
threejs editor is useful, but it is completely independent of the project and cannot react to the code in real time,i may need to integrate functionality from this into my tool, if possible in the future I will open source it for others who need it
Chrome debugger can edit code on the fly without reloading… if the code is in the executing path. Just change a line, ctrl-s… and it soaks up the change.
1 Like
yes it can be done, but not only that, i want to do this in project code
modify the code and then view the model parameters in the gui, or modify the parameters in the gui and view the effect on the page, it is what I want
I seem to be twisting my tongue, wait until I show the code future
Depending on your use case, you may want to give theatre.js a try, as it does exactly that, plus other DCC-inclined gui (i.e. AE) like dope sheet, graph editor for animation, etc
4 Likes
thank you, it is very easy to use. We refer to other GUI frameworks such as DAT.GUI. They are very mature and tested for a long time,we have almost given up the second development and laborious and no benefits. It is very wise to use the existing tools.