Please look at this 3D scene: (the link became obsolete)
The curve is made of multiple (1092) short THREE.Line objects.
This curve, the ball (THREE.SphereGeometry) and the sod (THREE.CubeGeometry) are nested in THREE.Object3D which I am rotating using rotation.x and rotation.y properties.
The problem is that the curve sometimes is merged into the sod or visible through an opposite side of it although the curve actually "hangs" above the sod.
What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,
THREE.CubeGeometry( 50, 3, 50, 4, 1, 4 );
three.js r.58
Related
I am working on a Three.js scene that renders some statically-positioned and textured quads, and some of my quads are flickering when I move my camera around. I've seen this in the past when two quads exist at the same x, y, z coords (I believe people refer to this as z-fighting).
I'm unsure what causes this behavior in cases where two quads don't intersect at all though:
Does anyone know what might cause this behavior, or how to remedy this behavior? I'd be grateful for any suggestions others can offer on this question.
P.S. My scene has ~2000 lines of JS right now, but I could spend the requisite hour making a demo of the problem if that's truly necessary.
This is most likely an issue with precision of the renderer's DepthBuffer. For instance, if you initialize your PerspectiveCamera with a .near plane of 0.0001 and a .far plane of 1000000, you could get z-fighting when objects come close to each other without even touching. To avoid this, you could try a smaller near-far range so your depth precision doesn't get "spread too thin", such as 0.1-100:
var camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
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've gone through the working live example of CombinedCamera and with inspiration I embedded combinedcamera in my work.
camera = new THREE.CombinedCamera( width /2, height/2, 45, 0.1, 1000, -1000, 1000, 1000 );
But while using Perspective Camera, my application works fine:
But The same application, while using orthographic projection doesn't work at all and it looks so weird.
Whats the problem in my code? I want the orthographic projection in all x, y and z directions on the object. How to do that?
The width and height of the CombinedCamera orthographic projection is from the intersection of a plane mid-way from the near and far planes of the perspective projection. If your object is small but close to the camera, it'll be rendered very small as in your second image.
Your settings have 0.1, 1000 as the near and far planes, so it's attempting to frame an object ~500 units from the camera, which is much larger than your object.
You have a number of options:
Use setFov or setZoom when in orthographic mode to frame your object better.
Scale up your object and place the camera/object so that its centre lies mid way from the camera's near and far plane.
Modify the camera's near and far plane so that they more closely frame your scene - e.g. if your camera is 25 units from the center of the objects, set the near and far plane distances on the camera to 0.1, 50 - the midpoint will be ~25 units and will frame your objects as desired when switching modes.
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;
As a continuation to: Point one object to face a distant object
I'm trying to get a mesh's surface to point to another object. I want a far away object to point to a close object, whenever the far object moves.
Here is a sample of what is happening: http://jsfiddle.net/UsVUv/
1) I create 2 mesh objects.
2) Since the far mesh is facing up, I rotate it so that it can be seen from the camera.
-> farMesh.rotation = new THREE.Vector3(Math.PI/2, 0, 0);
3) When the far mesh is moved, I call the following to get it to keep looking at the near mesh. The face of the far mesh does not look at the near mesh, but the edge of its plane does.
-> farMesh.lookAt(nearMesh.position);
4) I then try to rotate the mesh back so it faces the camera again, but that removes the rotation that the lookAt did.
-> farMesh.rotation = new THREE.Vector3(Math.PI/2, 0, 0);
You can comment out the lines 1), 2), and 3) in the sample to see what is happening.
Yes, the farMesh.lookAt() and farMesh.rotation are competing with each other.
What you need to do, instead, is rotate the farMesh plane geometry as soon as it is created with applyMatrix() like so:
farMesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
So to summarize, applyMatrix() transforms the object's geometry, and lookAt() sets the object's rotation vector.
Here is an updated Fiddle: http://jsfiddle.net/UsVUv/1/