3D Model Same Scale at Three JS - javascript

I'm adding more than one .OBJ file (3D Model) to my Three.js scene via Input File, and I want to make them the same size.
The problem is that this 3D models come each one in different sizes, some of them being huge and the other ones being very small.
Does anybody know a way of making all the 3D Models the same size?
Thank You!!!

You have to modify the Object3D scale property. You can scale independently X, Y and Z, so you can set them up to half of its size setting this scale like this:
yorDownloadedObject.scale = new THREE.Vector3(0.5, 0.5, 0.5);
or double its size like this:
yorDownloadedObject.scale = new THREE.Vector3(2, 2, 2);
But if the sizes are too different you may want to scale up or down depending their actual size...
To know their original size, before scaling, get their bounding box using the Object3D.Geometry property method named computeBoundingBox (or computeBoundingSphere).
Afterwards scale up or down up to your desired size depending on the Geometry.boundingBox property using Cross-multiplication.
Another recommendation is that you get the models resized and do not touch anything.

Related

Initial Sprite Size in Three.js

Can someone help me understand how three.js initially determines the size/scale of a sprite?
At the moment I'm working with 4 sprites (PNGs with transparency that are 3000px × 1830px) stacked in 3D space, but I'm having to scale them up between 16x and 22x. In order to keep the sprites from looking squashed, though, I have to scale the y-axis 75% of the x-scale.
Eventually, I want to be able to pull in images systematically, and have them scale appropriately.
It's possible I just haven't set this thing up correctly. It looks right, but it's super hacky-feeling right now. I pretty much changed a bunch of numbers, until it looked right to me. I don't like that. I want to understand.
Here's what I'm working with currently:
http://valorink.com/3d-test/stackoverflow/
Looking into the code of the Sprite class reveals that a simple plane with width and height of 1 is created in the constructor. I wouldn't have expected anything else, because the geometry size is usually not defined by the texture size.
You probably want them to fill the viewport, so you have to scale them. With perspective camera its a bit of math, because the amount of x-scale (or y-scale) to fit the viewport size relates to the distance to the camera. So, it should be something like
var halfHeigt = distanceToCamera / Math.tan( camera.fov/2 * Math.PI / 180 );
y-scale = halfHeight * 2;
And of course you need to consider the aspect ratio in order to not looking squashed. So, x-scale should be y-scale * textureWidth / textureHeight, or the other way round y-scale = x-scale * textureHeight / textureWidth.

How to extrude height segments from a cylinder in three.js?

I have a cylinder that is split into many height segments (the amount depends on the data). For each height segment I have a value for which I want the entire circle at that height to be extruded.
So essentially I end up with a cylinder that has very spiky edges.
I was intending to do this by manually moving the vertices or faces but I cannot seem to access the vertices/faces for a given segment.
So basically I need to scale the segment at N height.
Any suggestions on which direction I take? Have had a few failed attempts now and am running out of ideas.
Have a look at the source code for CylinderGeometry.js on GitHub.
You could copy this entire method and call it something different, e.g.
THREE.CylinderGeometry2 = function (...
Then change the generation of the vertices based on the number of height segments you have.

How to allow layout.pack() size to be free form in d3?

I'm using the d3.layout.pack(), where I have a bunch of data represented in circles of varying sizes. These circles sizes change, but how do I also make the outermost circle (the circle in which all the nodes are bound in) change in size? I want to show increase/decrease changes in the total numbers.
To do that, you need to change the size of the pack layout using the .size() function. You could use a scale to make it scale with the maximum number, e.g.
var s = d3.scale.sqrt().domain([min, max]).range([100, 500]);
packLayout.size([s(thisMax), s(thisMax)]);

OrbitControls : updating position and World/View scale of a 'helper'

I'm trying to manage a 3Dobject that visualize the controls target in order to make rotation and zoom more immediatly understandable ...
I've made a sample here with an AxisHelper which is supposed to indicate the target and to keep the same size. In OrbitControls.js there are comments on each line I've added.
As you can see if you pan and zoom (right click and scroll) it manages cursors too, but the 'helper' has two problems :
the position and scale of the helper is set after the renders, that why it seems to be somewhat elastic ... And if I place the position/scale updates into the scope.update() function that's the same thing.
the function bellow scales the helper to a constant size, it computes a World/View scale at a defined point (the control's target) from a unit vector. But it seems it's not the good solution because when you scroll to the max zoom the helper is growing.
var point = new THREE.Vector3( 1, 0, 0 );
point = point.applyMatrix4( scope.object.matrixWorld );
var scale = point.distanceTo( scope.target );
helper.scale.set(scale, scale, scale);
So if you have an idea to achieve this you are welcome ...
i'm currently developing something similar with threejs and i think that:
I can't see the demo, my proxy not allow it.
I think that is correct...if the object helper is a mesh or a sprite added to the scene when orbit controls zoom the camera became more near to the objects in the scene, the objects dimension remain the same.

Drawing a Canvas into a smaller Canvas not working

For a Project I want to take the content of a canvas (Called SAVE_CV) and display it in another, smaller canvas.
Some things that I am aware of so far that could be causing me problems: resizing a canvas clears its content, the JS-size of a canvas is different from the CSS-size.
I want the smaller canvas to be 500px wide and appropriately high.
function restoreTaggingCV() {
var cv = document.getElementById( 'taggingCV' );
var ctx = cv.getContext( "2d" );
var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}
This is my Code so far. Whenever I try to resize the smaller canvas appropriately it only gives me a blank canvas with nothing in it. I tried to set the size with "cv.height = X" and "cv.style.height = styleHeight + 'px'" but neither worked. Also I would love to set the width of the canvas using CSS.
Appreciate any help.
EDIT
I want the image in a picture because later I want the user to mark areas in the smaller version which I then want to use to create individual imaged from the big version. I want to visualise thise area to the user. I probably could do all this by using an image and putting divs over it or something but I just fell more comfident using a canvas since I am pritty new to HTML and CSS.
Try using the CanvasRenderingContext2d.prototype.scale method. It sets the scale factor of the canvas and renders anything in the current state with it's dimensions multiplied by the factor.
So before you use the drawImage function, you scale the context appropriately (in this case, down). For example:
context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();
This would render the canvas on the context at 0.5 times it's current size. See in this fiddle how I used it to mirror a larger canvas onto a smaller, separate one.
Canvas objects don't like to be resised. After drawing Your image simply convert it toDataURL() and set as image source. They You may resize image as you want.
$img.attr('src',canvas.toDataURL());

Categories