I want to draw line of walls in the room using available data from RoomPlan.
I am using RoomPlan sdk to get the 3d model of a room in ios 16.
Each wall is returned as a Surface object in the api that looks something like this:
Now the two most crucial piece of information is dimensions and transform.
The dimensions vector is [width, height, length]
In one of the forums I read the following:
"You can use transform and dimensions parameters to draw lines. The 4
corners can be inferred from those 2 parameters: the first column of
the transform is the "right" vector, and second is the "up" vector.
The fourth column is the position of the
wall/door/opening/window/object Combining those unit vectors with the
dimensions vector will give you the corners."
Also saw someone post this code on apple site to find a door's corner points:
The central point of a door can be defined as: Point(door.transform[3].x, door.transform[3].y, door.transform[3].z)
upperLeftPoint = Point(centerPoint)
upperLeftPoint = upperLeftPoint.translate(rightV.negate(), doorWidth/2)
upperLeftPoint = upperLeftPoint.translate(upV, doorHeight/2)
I am very new to Computer Graphics and need to understand at a theoretical level what's happening here. Can anyone guide me as to how one can draw the lines for a wall / door using the given values or more specifically find the corner points of walls/doors?
The way I am currently doing this is hinted at with the last code snippet you posted. I added functionality to the CapturedRoom.Surface class and also created a RoomPoint struct to represent the corners with the following code
extension CapturedRoom.Surface {
var center: RoomPoint {
return RoomPoint(x: self.transform[3].x, y: self.transform[3].y, z: self.transform[3].z)
}
var bottomLeftPoint: RoomPoint {
let center = self.center
var x = dimensions.x/2
var y = dimensions.y/2
x.negate()
y.negate()
let leftBottom = center.translate(x: x, y: y, z: 0)
return leftBottom
}
}
struct RoomPoint {
var x: Float
var y: Float
var z: Float
func translate(x: Float, y: Float, z: Float) -> RoomPoint {
return RoomPoint(x: self.x + x, y: self.y + y, z: self.z + z)
}
}
The center of any CaptureRoom Surface seems to be given by the last vector in transform matrix. The surface dimensions vector holds the [width (x), height (y), length (z)]. The center point is in the center of our surface meaning there is half the width and height on either side. So if we take the center and remove half the width and height we should get the bottom left corner of that surface. The length (z) coordinate doesn't matter in this case because our surface is on a vertical plane and has no depth. I'm currently stuck trying to find the surface area of a room with many corners by creating a polygon out of these corner points. Not sure where I am wrong - hopefully not in this answer I gave haha.
(Hello, it's my first ever post here)
here's what I'd like to incorporate in this simple example:
I would like to make the background turn from light to dark gradually when the user is closer to a particular orientation – in this case (example above) the desired orientation is a steep angle so that the foreshortened anamorphic image looks like a regular skull (the value of the background indicating the angle user should aim for – kind of like playing Hot and Cold)
when the user reaches the desired orientation (the background is then accordingly 100% dark) I would like it to lock rotation and trigger a video file in the background or a pop up window.
I assume it has to do with accessing the camera rotation values inside OrbitControls and setting some kind of an Event?? i have no idea how to access it.
Any kind of help, suggestions to edit the thread or explanation would be greatly appreciated, thank you so much in advance!
You could use camera.position to calculate the best vantage point. First, you have to figure out what the desired position is (I'm not sure how the wooden board is being placed, but this position seems to be close to: { x: 6.8, y: 0.6, z: -1.8})
var vantagePoint = new THREE.Vector3(6.8, 0.6, -1.8);
var distance = 100;
var normalized = 1;
var endColor = new THREE.Color(0xff9900);
var startColor = new THREE.Color(0x0099ff);
scene.background = startColor;
animate() {
distance = vantagePoint.distanceTo(camera.position);
normalized = THREE.Math.smoothstep(distance, 5, 100); // Converts [1, 100] => [0, 1]
// Resets the color on each frame
startColor.set(0x0099ff);
startColor.lerp(endColor, normalized);
}
The closer to 0 you are, the closer you are to seeing the skull. You can then use that value to change the color of scene.background. Anything beyond 10 and you're 'cold', and you get hotter as you approach 0.
https://threejs.org/docs/#api/en/math/Vector3.distanceTo
Update:
You can then transform the distance to a normalized value in the range of [0, 1] by using Math.smoothstep(). Then interpolate the value of the colors with this normalized value using Color.lerp
I think this is ultimately a pretty simple question, but it's hard to describe, thus, I provide a working example here (in the sample press 'z' to see rotation with unwanted translation and 'x' keys to rotate with a compensating re-position).
Basically, I am trying to rotate an object (a thumbstick) about the z-axis of a complex model loaded via gltf (a model of the oculus rift touch controller). It's easy to rotate about the x-axis because it's 90 deg. orthogonal to the x-axis. About the z-axis, it's harder because the plane the thumbstick is attached to is angled at 30 deg. I realize that if the thumbstick were using local coordinates, this wouldn't be a problem, but 'thumb.rotation.z' does not seem to be using local coordinates and is rotating about the model's (as a whole), or maybe even the scene's global y and z (?). Anyway, after a bunch of futzing around, I was able to get things to work by doing the following:
// occulus plane is angle at 30 deg, which corresponds to
// 5 units forward to 3 units down.
var axis = new THREE.Vector3(0, 5, -3).normalize();
factory.thumbstick.geometry.center();
var dir = (evt.key === 'x' ? 1 : -1);
thumb.rotateOnAxis(axis, factory.ONE_DEG * 5.0 * dir);
Basically, I'm rotating about a "tilted" axis, and then calling 'center' to make thumbstick centered on the pivot point, so it rotates about the pivot point, rather than around the pivot point (like the earth orbiting the sun).
Only problem is that when you call 'geometry.center()' and then call 'rotateOnAxis', it translates the thumbstick to the pivot point:
Note: the position on the thumbstick object is (0,0,0) before and after the calls.
I have empirically determined that if I alter the position of the thumbstick after the translation like so:
// magic numbers compensating position
var zDisp = 0.0475;
var yDisp = zDisp / 6.0
thumb.position.x = 0.001;
thumb.position.y = -yDisp;
thumb.position.z = zDisp;
Then it (almost) returns back to it's original position:
Problem is these numbers were just determined by interactively and repeatedly trying to re-position the thumbstick i.e. empirically. I simply cannot find a programmatic, analytical, api kind of way to restore the original position. Note: saving the original position doesn't work, because it's zero before and after the translation. Some of the things I tried were taking the difference between the bounding spheres of the global object and the thumbstick object, trying to come up with some 'sin x- cos x' relation on one distance etc. but nothing works.
My question is, how can I progammatically reverse the offset due to calling 'geometry.center()' and rotateOnAxis (which translates to the pivot point), without having to resort to hacked, empircal "magic" numbers, that could conceivably change if the gltf model changes.
Of course, if someone can also come up with a better way to achieve this rotation, that would be great too.
What's throwing me is the (peceived?) complexity of the gltf model itself. It's confusing because I have a hard time interpreting it and it's various parts: I'm really not sure where the "center" is, and in certain cases, it appears with the 'THREE.AxesHelper' I'm attaching that what it shows as 'y' is actually 'z' and sometimes 'up' is really 'down' etc, and it gets confusing fast.
Any help would be appreciated.
The breakthrough for me on this was to re-frame the problem as how do I change the pivot point for the thumbstick, rather than how do I move the thumbstick to the (default and pre-existing) pivot point. To paraphrase JFK, "ask not how you can move to the pivot, but ask how the pivot can move to you" :-)
After changing my angle of attack, I pretty quickly found the aforementioned link, which yielded my solution.
I posted an updated glitch here, so now pressing z works as I expected. Here is the relevant code portion:
factory.onModelLoaded = function(evt) {
console.log(`onModelLoaded: entered`);
factory.thumbstick = this.scene.children[1].children[2]
let thumb = factory.thumbstick;
// make the thumb red so it's easier to see
thumb.material = (new THREE.MeshBasicMaterial({color: 0xFF7777}));
// use method from https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center/28860849#28860849
// to translate the pivot point of the thumbstick to the the thumbstick center
factory.thumbParent = thumb.parent;
let thumbParent = factory.thumbParent;
thumbParent.remove(thumb);
var box = new THREE.Box3().setFromObject( thumb );
box.getCenter( thumb.position ); // this basically yields my prev. "magic numbers"
// thumb.position.multiplyScalar( - 1 );
var pivot = new THREE.Group();
thumbParent.add( pivot );
pivot.add( thumb );
thumb.geometry.center();
// add axeshelp after centering, otherwise the axes help, as a child of thumb,
// will increase the bounding box of thumb, and positioning will be wrong.
axesHelper = new THREE.AxesHelper();
thumb.add(axesHelper);
}
Which allows my "z" handler to just rotate without having to do translation:
case 'z':
case 'Z':
var axis = new THREE.Vector3(0, 5, -3).normalize();
var dir = (evt.key === 'z' ? 1 : -1);
thumb.rotateOnAxis(axis, factory.ONE_DEG * 5.0 * dir);
break;
Interestingly, it's the call to box.getCenter() that generates numbers very close to my "magic numbers":
box.getCenter()
Vector3 {x: 0.001487499801442027, y: -0.007357006114165027, z: 0.04779449797522323}
My empirical guess was {x: 0.001, y: -0.00791666666, z: 0.0475} which is %error {x: 32.7%, y: 7.6%, z: 0.61%}, so I was pretty close esp. on the z component, but still not the "perfect" numbers of box.getCenter().
OK, so the Core Image filter Temperature and Tint has two inputs, neutral and targetNeutral. However, my biggest issue is the fact that they're both two-component vectors, meaning each has two numeric inputs. I would expect the first to be from say 2500 to 10000. What would the vector be for?
The essential purpose of performing temperature and tint adjustment is to correct the white balance of a captured image: to account for the ambient illumination of the scene and adjust colors so that the image appears more like it was shot in "white" light (roughly 6500K).
Temperature relates to the warmth or coolness of an image, and is normally characterized qualitatively as orange-ish or bluish.
Tint refers to the deviation toward green or magenta of colors at the same temperature. Note that tint (defined as such) is mostly independent of color temperature. (Take a look at a CIE diagram with the Planck locus and isotherms drawn on it to develop your intuition about this. Here's one: http://en.wikipedia.org/wiki/File:Planckian-locus.png).
So, when you are interested in performing white balance adjustment (whether to make an image appear more realistic, or for artistic purposes), there are four different parameters you must supply: the temperature of the initial image, the tint of the white point as it appears in the initial image, the desired color temperature of the output image, and how tint-shifted the "neutral" tones should appear in the output image. The temperature/tint combination of an image is a function of the ambient light in the scene and the response of the material being imaged, and both temperature and tint are necessary to meaningfully characterize the white balance of a captured image.
This is why CITemperatureAndTint takes two vectors: it wants the two pairs of (temperature, tint) just described.
Now, if you want to create a UI for controlling white balance, you don't actually have to give the user control of all four of these values. Instead, hold the second vector (TargetNeutral) at a constant (6500, 0) and allow the user to adjust the other vector (Neutral). With this arrangement, the user will be selecting the perceived color temperature and tint shift of the original image. (You might choose instead to hold the Neutral vector constant and allow the user to tweak the Target Neutral vector; this may be more appropriate in contexts where the user wants to adjust the white balance artistically, but the correlation between the selected values and the resulting image is not as obvious).
#warrenm said in great detail, I will add the code to those who need to use it directly!
Temperature:
var value: CGFloat = 0 // Min: -3000, Max: 3000
return image.applyingFilter("CITemperatureAndTint", parameters: [
"inputNeutral": CIVector.init(x: value + 6500, y: 0),
"inputTargetNeutral": CIVector.init(x: 6500, y: 0)
])
Tint:
var value: CGFloat = 0 // Min: -100, Max: 100
return image.applyingFilter("CITemperatureAndTint", parameters: [
"inputNeutral": CIVector.init(x: 6500, y: value),
"inputTargetNeutral": CIVector.init(x: 6500, y: 0)
])
I gave up trying to understand Mathematica 3D axes configuration.
When I make 3D plot, and label the 3 axes to identify which axes is which, and then make points on these axes, the points appear on different axes than what I expect them to show at using the Point command, which takes {x,y,z} coordinates.
Here is an example
g=Graphics3D[
{
{PointSize[0],Point[{0,0,0}]}
},
AxesOrigin->{0,0,0}, PlotRange->{{-3,3},{-3,3},{-3,3}},
Axes->True, AxesLabel->{"X","Y","Z"},
LabelStyle->Directive[Bold,Red,16],
PreserveImageOptions->False, Ticks->None,Boxed->False]
The above results in
So, now I added a point at at end of the x-axis, and at the end of the y-axis, and at the end of the z-axis. I make each point different color to help identify them on the plot.
g=Graphics3D[
{
{Red,PointSize[.03],Point[{3,0,0}]},
{Black,PointSize[.03],Point[{0,3,0}]},
{Blue,PointSize[.03],Point[{0,0,3}]}
},
AxesOrigin->{0,0,0},PlotRange->{{-3,3},{-3,3},{-3,3}},
Axes->True,AxesLabel->{"X","Y","Z"},
LabelStyle->Directive[Bold,Red,16],PreserveImageOptions->False,
Ticks->None,Boxed->False]
The result is this:
You can see, the RED point, which I expected it to go to end of the x-axis, shows up at the end of the Z axis. And the Black point, instead of showing up at the end of the Y-axis, shows up at X-axis, and the blue point, instead of showing at the end of the Z axis, shows up at the end of the Y-axis.
May be the labels are wrong? May be I am looking at the image in wrong way?
I am really confused, as I am clearly not understanding something. I looked at documentation, and I could not find something to help me see what I am doing wrong. I am just starting to learn Mathematica 3D graphics.
EDIT:
add image with Ticks on it, reply to Simon, I did not know how to do it the comment box:
g=Graphics3D[
{
Cuboid[{-.1,-.1,-.1},{.1,.1,.1}],
{Red,PointSize[.03],Point[{2,0,0}]},
{Black,PointSize[.03],Point[{0,2,0}]},
{Blue,PointSize[.03],Point[{0,0,2}]}
},
AxesOrigin->{0,0,0},
PlotRange->{{-2,2},{-2,2},{-2,2}},
Axes->True,
AxesLabel->{"X","Y","Z"},
LabelStyle->Directive[Bold,Red,16],
PreserveImageOptions->False,
Ticks->True, TicksStyle->Directive[Black,8],
Boxed->False
]
here is the result:
EDIT: OK, I decided to forget about using AxesLabels, and I put them myself . Much more clear now
m=3;
labels={Text[Style["X",16],{1.2 m,0,0}],Text[Style["Y",16],{0,1.2 m,0}],
Text[Style["Z",16],{0,0,1.2 m}]};
g=Graphics3D[
{
{Red,PointSize[.03],Point[{m,0,0}]},
{Black,PointSize[.03],Point[{0,m,0}]},
{Blue,PointSize[.03],Point[{0,0,m}]},
labels
},
AxesOrigin->{0,0,0},
PlotRange->{{-m,m},{-m,m},{-m,m}},
Axes->True,
AxesLabel->None,
LabelStyle->Directive[Bold,Red,16],
PreserveImageOptions->False,
Ticks->True, TicksStyle->Directive[Black,8],
Boxed->False
]
I agree with you that AxesLabel for 3D graphics is next to worthless. Look at the effects of a small interactive viewpoint change on your figure:
IMHO WRI should really improve the operation of this option, and preferably provide some more placement control too (end/mid of axes etc.).
I believe the labels are being placed in unintuitive spots. Replacing your dots with colored lines of different length is clearer to me. I've also removed the explicit plot range which helps Mathematica put the labels in much clearer places.
g=Graphics3D[
{
{Red,Thick, Line[{{0, 0, 0}, {1, 0, 0}}]},
{Black,Thick, Line[{{0, 0, 0}, {0, 2, 0}}]},
{Blue,Thick, Line[{{0, 0, 0}, {0, 0, 3}}]}
},
AxesOrigin->{0,0,0},
Axes->True,AxesLabel->{"X","Y","Z"},
LabelStyle->Directive[Bold,Red,16],PreserveImageOptions->False,
Ticks->None,Boxed->False]