Paint on an object using Three.js - javascript

I want to paint on an objects surface using the mouse.
Here's an example of what I want to do:
http://www.cartelle.nl/deathpaint/
Does anyone know of any basic example of how to do this?
I guess you paint on a canvas and then that is applied on to the 3D object in some way.
Anyone knows how this is done?


Finally I found this, chameleon.js
https://tomtung.github.io/chameleon.js/
Seems to do exactly what I wanted.

Related

Measure element while drawing using javascript

I am implementing draw/modify features using OpenLayer in ReactJS and came across a very interesting question.
How can I draw a line and at the same time see how long it is in the real world (considering zoom and scale of the map).
So for instance when I draw a line I would like to have an info like "real world length: x meters" where x is dynamically changing while extending the line.
Is it possible to achieve such a functionality using OpenLayers and ReactJS (or just pure JS)? Is there maybe a better solution? Maybe anyone saw something that works this way?
Thanks for help in advance.

The ol-ext/Overlay/Tooltips can do it for you.
See example online: https://viglino.github.io/ol-ext/examples/popup/map.tooltip.measure.html

Javascript Geometry Draw

I have to draw geometry shapes like the sample image attached here.
I check the three.js, pepper.js but, I am confused that which one is the best library for this type of work. Please help me to decide the library.

Most processing libraries will do the job. Have a look at p5.js, it is fairly simple to get started with.
https://p5js.org/

I use the GD library to complete these complex diagrams. Drawio helps me a lot to create the diagrams and get the coordinates of X and Y axis.

For ThreeJS, 'm looking for a Helper class or utility that works like AxisHelper

In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.

I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80

Creating a force directed graph in Babylon.js

I am attempting to create a force directed graph in my Babylon.js project and was wondering if anyone had suggestions as to how I should go about that. I am looking into the barycentric method and the Barnes-Hut method but am wondering if there are any simpler ways of doing so (such as how it is done in d3.js by typing d3.layout.force) or if I should continue on with one of those methods above. I need to add the nodes on top of a plane within a 3D area but the y values of the nodes will remain constant so it is more of a 2D problem.
I also looked into Springy (http://getspringy.com/) but I am not sure if it would be possible to implement that into Babylon.js due to the 3D nature of Babylon.
If anybody has a suggestion to solve this problem I would greatly appreciate it.
Thank you.

I would break this problem into multiple pieces.
Wrangle the data using an off-the-shelf algorithm into coordinates, then feed the coordinates into Babylon.
A really cheesy way to do it would be to let d3-force do its magic in a hidden SVG, then feed the graph data into Babylon.
Yes, it's a hack, but it would seem to be fast and easy!

Create an interactive map using JavaScript/jQuery

I would like to implement a little map "like" Google Maps. Its a fictive one (Game Map). I should have the ability to zoom and move around. Also i would like to be able to put some markes on it and do a very basic routing.
My question is now purly conceptual. How would you realize this?
Map as background that scales and moves. Then an overlay like a Canvas object to draw over it? Somene has experience with this? I don't really know if this is the right approach.
Thank You.

Have you ever used a program called Impact?
its really useful when building games in HTML5
http://impactjs.com/

I don't fully get what you want but with jVectorMap ou can create you own vector(!) maps with markers and custom colors.
So I think it will help you.

Categories

Resources