I'm trying to position a part of a texture that is being rendered on a portion of a SphereGeometry, inside a full SphereGeometry.
I attach a jsfiddle so you can see what I mean:
https://jsfiddle.net/ggL3uemh/23/
If you open the link, you will see that the smaller texture in the scene is a part of the bigger one.
The bigger one is rendered on a big full sphere.
The smaller one, is rendered on a portion of a sphere.
I want to give the smaller Mesh the proper position, rotation and scale so it can perfectly fit inside the sphere making it look like the smaller one isn't even there.
I suspect the part of the sphere is not correct either...
this.videoCustomGeometry = new THREE.SphereBufferGeometry(500, 64, 64, 1, 1.8, 1, 0.9);
this.videoCustomGeometry.scale( - 1, 1, 1 );
I came close to find the position, using a raycaster and attaching the next code to the mousemove event:
this.raycaster.setFromCamera(this.mouse, this.camera);
var intersects = this.raycaster.intersectObjects([this.pano], false);
And then, I get the exact position where the smaller Mesh should be positioned, but I don't know about the rotation, scale, or if the geometry the smaller Mesh is using is correct.
I'm stuck... thanks in advance!
Related
What I have is an OrthographicCamera set up so that is has an isometric view of the scene and OrbitConrols added to allow for panning around and zooming but not for rotation.
What I’d like to have is a button that will centre the objects in a scene and zoom the OrthographicCamera so that the objects fit within the canvas area while keeping the isometric view, i.e. the angle between the camera.position and the camera.lookAt (control.target) point.
What I’ve tried is to set the controls.target at the centre of the bounding box of the objects in the scene.
I have 2 problems with the code at the moment.
The First is I couldn’t work out how to calculate the zoom level needed to make sure the objects in the scene are all in view. I’ve hard coded a value for just now.
The Second is that with the current code, if the camera is panned so that the objects appear nearly off the screen, either up or down, then when centred the angle of the camera changes. This was happening when the camera was panned far left or right but setting the max and min Azimuth Angle seems to prevent this.
camera rotates after centring
The image above shows the scene when loaded then after centering when the camera was panned so the objects were going off the top of the screen.
I have tried a number of ways to do this after looking at answers to similar questions as this but am still having problems getting it to work.
function fitDrawingToPage(){
// Variables Bbox etc are set outside the function
Bbox = new THREE.Box3();
for (const object of sceneObjects) Bbox.expandByObject(object);
newTarget = Bbox.getCenter(new THREE.Vector3());
controls.target.set( newTarget.x, newTarget.y, newTarget.z );
controls.update();
camera.zoom = 0.5;
camera.updateProjectionMatrix();
camera.updateMatrix();
render();
}
current example of code in jsfiddle
I have a THREE.PerspectiveCamera to which I add a THREE.CameraHelper.
cameraLocal = new THREE.PerspectiveCamera(70, 1, 20, 120);
scene.add(cameraLocal);
cameraLocalHelper = new THREE.CameraHelper(cameraLocal);
cameraLocal.add(cameraLocalHelper);
However when I rotate the camera,
cameraLocal.rotateX(0.1);
the CameraHelper rotates by a larger amount than the camera.
I've made a
demo that shows this.
Initially, cameraLocal can't see the help lines drawn by the CameraHelper. However, if cameraLocal is rotated either way about the x-axis, the help lines come into view, I'm supposing on account of the CameraHelper rotating by a different amount.
Could anyone point out what I'm doing wrong here?
I'm using the build of three.js from 5-Aug-2019.
CameraHelper needs to be added directly to the scene.
Do not try to add it as a child of the camera itself.
three.js r.107
I want to remove clipping planes in THREE js but I can't seem to find any information on how to do this. What I found is that orthographic camera can have negative value for near clipping plane.
If I put negative value in near clipping plane of perspective camera, it doesn't throw an error but doesn't show any objects.
I draw relatively huge objects and the near clipping plane is very frustrating when I try to explore them as they disapear completely if they are behind the camera even if most of the object should still be visible, is there a way to remove it so my objects always gets drawn?
here is the camera values I use:
var camera = new THREE.PerspectiveCamera(90, size.x/size.y, 0.1, 1000);
When I move, I move the camera instead of all the objects relative to a fixed camera, I guessed it would be more performent, but I don't think it matters for my problem.
All of the objects have position (0, 0, 0) but can have part extending up to 10-15 units away from their position
I have some planes, parented to an empty Object3D. Those planes are always facing the camera,like sprites. It works fine unless I rotate the parent. Three.js documentation says that .lookAt doesn't support transformed parents
So I am trying to figure out how to solve it manually.
Here is what I have now:
plane.onBeforeRender = function( renderer, scene, camera,
geometry, material, group ){
var worldCamPos = new THREE.Vector3();
camera.getWorldPosition(worldCamPos);
this.worldToLocal(worldCamPos);
this.lookAt(worldCamPos);
// this.quaternion.copy(camera.quaternion);//this one rotates in local space of the container
};
So I a m trying to convert camera's position to the space inside which the plane lives,and use it as lookAt target.
The problem is,the plane is sort of looking at the camera,but it constantly flickering as if swapping rotations from default to the desired one,back and forth. I don't concatenate here anything,so I don't understand why it happens.
I would appreciate if someone could point out to more elegant solution,maybe with quaternions.
When we add a CustomGeometry to the scene with defining vertices and not setting the position, how can we get it to rotate around its own center point?
Fiddle : http://jsfiddle.net/tezcancirakoglu/Ldt7z
In the sample code, object is rotating around Scenes X axis. I need to rotate it around its center point.
Hint: The red cube mesh is the initial centerpoint of the object which is rotating. I need to rotate it around x axis of red cube... I tried alot but failed anyway.
One solution is to translate the mesh geometry, and compensate by changing the mesh position, like so:
var offset = objMesh.centroid.clone();
objMesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -offset.x, -offset.y, -offset.z ) );
objMesh.position.copy( objMesh.centroid );
updated fiddle: http://jsfiddle.net/Ldt7z/165/
P.S. You do not need to save your fiddle before running it. There is no reason to have so many versions.
three.js r.55
You can use the center of the bounding box, which would basically be the 'average' of your vertices but it is not guaranteed to fall onto the red cube.