In my scene I'm using an orthographic camera and a WebGLRenderer (new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true })). Two spheres are created by this code:
new THREE.Mesh(
new THREE.SphereGeometry(1, 64, 64),
new THREE.MeshLambertMaterial({ color: 0xffffff })
)
I shifted them away from each other with another code snippet, and for some reason they shine through each other, as marked in the picture even though they have the same size and the same location except from one axis.
Does anyone know why this is the case and how I can fix it?
Your orthogarphic camera parameters are in the wrong order. Do this:
camera = new THREE.OrthographicCamera( -5, 5, 5, -5, 1, 11 );
camea.position.set( 0, 0, 6 );
Also, your near parameter should be positive, as it is a distance in front of the camera.
The camera is looking down the negative z-axis. In your case, do not rotate it.
three.js r.68
Related
I created a ground, then I dug a gap in it, and finally added physical effects through physijs.
let Mesh = new THREE.Mesh(new THREE.BoxGeometry(800, 10, 800), material);
Mesh = new ThreeBSP(Mesh);
let Gap = new THREE.Mesh(new THREE.BoxGeometry(230, 10, 170), material);
Gap = new ThreeBSP(Gap);
Mesh = Mesh.subtract(Gap).toMesh(material);
Mesh = new Physijs.BoxMesh(Mesh.geometry, Mesh.material, 0);
scene.add(Mesh);
Then you create a collection with physical effects. The plan is to fall from the hole in the ground, and the result appears to be suspended in the hole. Why?
let geometry = new Physijs.BoxMesh(new THREE.CylinderGeometry(10, 15, 50, 25), material, 1);
geometry.position.set(0, 500, 0);
scene.add(geometry);
I'm building a house. I'm digging holes in the floor and walls to represent staircases and doors, and then I add physical effects to the floor and walls. In the plan, objects representing people can pass through these holes, but they are blocked. People are directly suspended above the holes in the stairway, and the door can't pass through, as if blocked by an invisible wall
Physijs.BoxMesh will just create a box with eight corners and flat planes in between. Have you looked into using Physijs.ConcaveMesh? I couldn't find any documentation, but you can see it in the source code.
Mesh = Mesh.subtract(Gap).toMesh(material);
Mesh = new Physijs.ConcaveMesh(Mesh.geometry, Mesh.material, 0);
scene.add(Mesh);
Right now i'm using orbit controls, and i can only rotate 180 degrees in the up-and-down direction. In another direction i can rotate forever, i think it is the z direction. Anyways, how can i make it completely limiteless for all rotation directions?
here's my code now, i tried it with and without infinity:
this.scene_threeD = new THREE.Scene();
this.camera_threeD = new THREE.PerspectiveCamera( 75, width_threeD / height_threeD, 0.1, 1000 );
this.renderer_threeD = new THREE.WebGLRenderer({ canvas: threeDCanvas,
preserveDrawingBuffer: true,
antialias: true });
this.renderer_threeD.setSize( width_threeD, height_threeD);
controls = new THREE.OrbitControls(this.camera_threeD, this.renderer_threeD.domElement);
controls.maxPolarAngle = Infinity;
controls.minPolarAngle = -Infinity;
controls.maxAzimuthAngle = Infinity;
controls.minAzimuthAngle=-Infinity;
controls.update();
The problem with an "orbital camera" is that (by definition) it always tries to keep the camera "up" pointing upwards. This means the camera orientation is undefined when you are looking straight up or down. That is why three.js implements a makeSafe() method that keeps the polar angle just within a +/- 90 degrees angle.
If you were to remove this limitation, you would probably see the camera instantly flip directions when passing the 90 degrees angle (or worse). This is generally undesired behaviour in an application.
To sum things up: if you want limitless rotation, you don't want an orbital camera. This is not a technical but a conceptual limitation.
I'm using EdgesHelper on a simple model that I exported from SketchUp. It is showing some diagonal lines like this:
How do I prevent those lines from appearing, so that the edges looks like what it appears in SketchUp? I tried setting the thresholdAngle but it doesn't help.
Update:
Working demo: http://jsfiddle.net/alan0xd7/6vLm5xsa/
This is the look I am trying to achieve:
You are rendering both the model and the edges helper in a scene without lights. Remove the model and you can see the helper clearly. All edges are rendered properly.
The reason for the extra edges is because you have two edges concurrent in your model -- a short edge and a long edge. You need to change your geometry. This is not a problem with three.js
If you want to show the edges, but have hidden edges truly hidden, you need to make use of the webgl feature polygonOffset. You can use a pattern similar to the following:
var mesh = dae.children[0].children[0];
mesh.scale.set( 20, 20, 20 );
// replace the material
mesh.material = new THREE.MeshBasicMaterial( {
color: 0x000000,
polygonOffset: true,
polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 1
} );
scene.add( mesh )
var helper = new THREE.EdgesHelper( mesh, 0xffffff );
helper.material.linewidth = 2;
scene.add( helper );
updated fiddle: http://jsfiddle.net/6vLm5xsa/15/
three.js r.71
I'm facing a issue to render cubes using CanvasRenderer, depends the camera position any cubes lost same parts and show a part of face other cube, as the below images:
In this example, there are two cubes, when the camera in front there aren't problem:
But, when I change de camera:
To render I use a array of materials, this is one of:
new THREE.MeshLambertMaterial({ color: 0x006600, ambient: 0xffff00, side: THREE.DoubleSide, overdraw: 0.5 }),
What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
Or better yet, switch to WebGLRenderer.
three.js r.70
I wanted to rotate a plane, but I can't figure out how to set the rotation axis. I'd like to rotate a plane around its edge.
I've seen solutions suggesting matrix transformations but they lacked explanation so I couldn't apply them.
Ok I figured it out. What you have to do is create a parent 3D object and add the plane to it. Once, added, you have to translate it by 50% and start rotating the parent object.
var object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 200, 50, 4, 4 ), [material] );
var parent = new THREE.Object3D();
object.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 25, 0 ) );
parent.add(object);
parent.rotation.x = 1;
scene.add(parent)