In order to know the current front face of a rotating cube I created a raycaster telling me which part of the cube intersects with it. So far I do not get any intersections although I think I did everything correct.
How can this be solved?
Thanks
You need to have your raycaster's ray point toward the object.
//var projector = new THREE.Projector();
var vector = cube.position.clone(); // new THREE.Vector3(100, 100, 0.5);
//projector.unprojectVector(vector, camera);
fiddle: http://jsfiddle.net/an86j/19/
Note: This question is not likely to be of use to anyone else but you, and that is not the purpose of this site. Try to ask questions that will be beneficial to others. See the faq.
Related
I am making a 3d voxel game using threejs. I am coming across a problem where I have a geometry, as well as a material and I am trying to make an instanced mesh of about 1000 blocks (to increase game performance) and I want to give each of those blocks a different position. How do I do this? This is what I have so far so you can refer to it, thanks!
var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
var blockMaterial = new THREE.MeshBasicMaterial({color : 0x00ff00});
Now that I have this, what should I continue to write if I want about 1000 blocks in an instancedMesh in certain positions that I want? Thanks again :)
I'm trying to detect at which wall of the box geometry is the user looking at. Imagine that user is in a room and I want to detect which wall is the camera currently looking at. I'm raycasting from camera like this:
var lookAtVector = new THREE.Vector3(0,0, -1);
lookAtVector.applyQuaternion(camera.quaternion);
raycaster.setFromCamera(lookAtVector, camera);
var intersection = raycaster.intersectObject(box);
console.log(intersection);
So this raycasting works fine outside the "room" but how to get it working inside the room?
One thing to remember is that the camera is always pointing in the negative z direction. When rotating and moving the camera, you are actualy rotating and moving the whole scene. Therefore I think there are two problems with you code.
I think you have to initialize your raycaster like this:
var raycaster = new THREE.Raycaster(camera.position, lookAtVector);
Where lookAtVector is just var lookAtVector = new THREE.Vector3(0,0, -1);, unmodified. This will send a ray from you camera's position in the direction it is facing.
Then I think that maybe you are not rendering you box backside. When constructing your box material, pass along side: THREE.BackSide (or THREE.DoubleSide) as a parameter
EDIT
I was wrong about the lookAtVector. The ray is probably cast before the camera has modified the scene. Therefore you are absolutely right when applying the cameras quaternion on lookAtVector
To raycast inside the box geometry you need to first make the inside of the box visible:
box.material.side = THREE.DoubleSide;
Or
box.material.side = THREE.BackSide;
I'm trying to make a Plane to always face the camera or another moving object but I want the Plane to only rotate on 1 axis. How can I use the lookAt function to make it only rotate side ways without tilting to look up or down at the moving object?
thanks, I managed to solve it easily by just keeping the y position of the rotating object constant.
if(planex){
var yaw_control = controls.getYawObject();
pos = new THREE.Vector3( yaw_control.position.x, planex.position.y, yaw_control.position.z );
planex.lookAt(pos);
}
http://www.lighthouse3d.com/opengl/billboarding/index.php?billCyl
maybe this article of any help for you. You are looking for those cylindrical billboards i think but read up from the first page ;) You can modify the specific mesh matrix yourself, although i am not sure if this is the most efficient way. I also did this myself once.
Get the camera look vec:
three.js set and read camera look vector
Then get the camera upVec and afterwards get the cross prodcut of those = rightVec according to the article above.
using those vectors, you can fill in a new Three.Matrix4() like explained in the article and then replace the meshes matrix with the newly created one. As I said, i am not quite into the matrix stuff in three.js but this works but it is probably not that efficient.
For this to work you will have to deactive the meshes auto matrix update with
mesh.matrixAutoUpdate = false;
I have a geometry object, and I'm trying to add a Torus mesh that goes around that geometry. What I'm trying to do is have the original geometry, and then when the geometry is clicked, it adds a Torus shape on the line around the location that was clicked. However, I'm having trouble getting it to rotate correctly.
I get the torus to show up at the correct place, but I can't orient it around the line. I'm using a raycaster to get the point clicked, so I have the face and the faceindex of the point clicked. On every implementation I try using rotation (using setEulerFromRotationMatrix), it simply moves the location of the torus mesh, not actually rotate it to allow the line to go through the torus.
This seems like it would be trivial, but it's giving me a lot of trouble. What am I doing wrong? Two methods I tried, both unsucessful and exhibiting the behavior above:
var rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationAxis(geometry.faces[fIndex].centroid.normalize(), Math.PI/2);
torusLoop.matrix.multiply(rotationMatrix);
torusLoop.rotation.setEulerFromRotationMatrix(torusLoop.matrix);
//attempt two, similar results to above attempt
tangent = geometry.tangents[segments/radiusSegments].normalize();
axis.crossVectors( up, tangent ).normalize();
var radians = Math.acos( up.dot( tangent ) );
matrix.makeRotationAxis( axis, radians );
torusLoop.rotation.setEulerFromRotationMatrix( matrix );
I need the torus knot to follow the curve of the spline, but it will only stay flat, and rotations simply cause it to move around, not change angles.
Never mind, I figured it out. For those wondering, I translated before rotating, which caused my figure to be rotating around a different axis. My solution was to rotate first, and then translate, and then after creating the mesh, moving that to the position I needed it to be.
I'm a web developer with a good JavaScript experience, and I'm currently exploring Three.js possibilities. However, I'm not very familiar with 3D shapes and vocabulary, and I can't figure out how to build the shape I need.
I want to create a halfsphere, and be able to project a video inside this sphere. I have a panoramic spherical video, and I need to distort it to make it look like "plane".
Thanks to Paul's tutorial, I have drawn a sphere and projected my video on it. But the external sphere surface is convex, and I need a concave one! How can I to achieve that? Extruding a smaller sphere out of my initial one?
You can create a half-sphere by setting the additional SphereGeometry parameters:
const geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )
Experiment until you get exactly what you want.
You will also have to set the side property of the material you use for the sphere to either be THREE.BackSide or THREE.DoubleSide.
material.side = THREE.DoubleSide;
three.js r.143
You can use SphereBufferGeometry, to create a half sphere (hemisphere). The last argument does it: 0.5 * Math.PI. Also to be able to see something, you need to use THREE.DoubleSide for material.
var geometry = new THREE.SphereBufferGeometry(5, 8, 6, 0, 2*Math.PI, 0, 0.5 * Math.PI);
...
material.side = THREE.DoubleSide;