[SOLVED]Mesure distance between two points on a object by clicking

Questions
,
24

you can make material of line with “depthTest: false”
https://threejs.org/docs/index.html#api/en/materials/Material.depthTest

1 Like
25

@Dragon3DGraff I added depthTest: false to lineMaterial in codepen (https://codepen.io/prisoner849/pen/NozKOL). But still it is not working

image
image1917×887 114 KB

1 Like
26

you can add
line.renderOrder = scene.children.length;

image
image985×708 43.5 KB

1 Like
27

@prisoner849

Your codepen is broken. I am trying to do this and I found this post. Sounds like what I need but I think it is deprecated.

Getting this error in codepen: Uncaught TypeError: THREE.Geometry is not a constructor

and this one: Uncaught TypeError: Cannot read properties of undefined (reading 'geometry')

Being new to Three…I have no clue how to fix this.

28

The collection uses the respective version.

It works. MesureDistance

The obsolete geometry is used.
See THREE.Geometry will be removed from core with r125

29

I code in C#, this three.js is totally new to me. I have no idea how to make it work going from Geometry to buffergeometry. I actually just read a post about how new people to three.js will be going down rabbit holes of old out dated stuff and that is exactly what’s going on… I don’t know if I’m coming or going now.

What’s the solution with the newest version of Three.js?

30

@J450NP13 Have a look at this example, Raycaster Measurements - Three.js Tutorials

2 Likes
31

Yes, this is a big problem, but not only with three.js. There are small changes here every month, but such big breaks as the abolition of the old geometry in r125 are rare.

When I search things for programming on the net, I always turn on the filter last year or similar. This often saves one from such old things. The good thing about three.js is that there is a lively forum.

Even if not immediately, there will surely be a new version of the example soon.

I saw you already looked at this thing. Drawing a line to get distance for basic models:

1 Like
32

@Lawrence3DPK Yeah I saw that, I guess I will have to go that route. I will have to attempt the snapping to vertices.

@hofk I appreciate your efforts with the collection you massed. If I installed Three.js in the last few weeks am I on the current version and what version is that?

My question now is, how do I know what version this Raycaster Measurements one is, and if it is up to date.

33

This is also problematic because it is handled very differently by authors.

If one looks into the broken codepen https://codepen.io/prisoner849/pen/NozKOL , you see

<script src="https://threejs.org/build/three.min.js"></script>

So the current version is loaded immediately from threejs.org. Hence the break, since the old geometry no longer exists. For my collection I always copy the current three.js and give the version number.

<script src="../js/three.min.101.js"></script>

Another variant is the use of a CDN.
Example Edit fiddle - JSFiddle - Code Playground
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";

For some examples, you have to go to the source and look for the revision in the three.js code. In three.min.js for the december version const e="135"


!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).THREE={})}(this,(function(t){"use strict";const e="135"

In three.js and three.module.js const REVISION = '135'; more easily recognizable.

In older versions unfortunately not at the beginning, e.g.
line 100 var REVISION = '111';

2 Likes
34

Works now. I’ve fixed it, now it uses the latest revision (r136) and BufferGeometry for the line.

3 Likes
35

@prisoner849 Thank you, diving in.

@hofk thank you for that information.

36

After connecting two objects with a segment, how do you make the segment expand as the object moves

37

By result of subtraction of the objects’ positions :thinking: