I implemented a technique from https://github.com/mrdoob/three.js/pull/20290
Almost everything works fine, but i need to clip a model with spotLight.shadow.camera frustum:
shadowCameraHelper = new THREE.CameraHelper( three.spotLight.shadow.camera );
I understood how to get planes for clipping:
frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiply( spotLight.shadow.camera.projectionMatrix, spotLight.shadow.camera.matrixWorldInverse ) );
When i add helpers to my camera i see that they almost fit SpotLightHelper - slight discrepancy due to spotLight.shadow.camera.near parameter (if i understood right):
helpers = new THREE.Group();
helpers.add( new THREE.PlaneHelper( frustum.planes[ 0 ], 75, 0xff0000 ) );
helpers.add( new THREE.PlaneHelper( frustum.planes[ 1 ], 75, 0x00ff00) );
helpers.add( new THREE.PlaneHelper( frustum.planes[ 2 ], 75, 0x00ff00 ) );
helpers.add( new THREE.PlaneHelper( frustum.planes[ 3 ], 75, 0xff0000 ) );
helpers.add( new THREE.PlaneHelper( frustum.planes[ 4 ], 75, 0x0000ff ) );
helpers.add( new THREE.PlaneHelper( frustum.planes[ 5 ], 75, 0x0000ff ) );
spotLight.shadow.camera.add(helpers)
I don’t understand how to set right positioning for planes to clip the model. Perfectly it must be local clipping (but global is fine too).
All Threejs objects are placed in Cesium space, so the coordinates are something like:
(x: 2847473.624183968, y: 2197845.085011498, z: 5249482.064107984)
So i have two questions:
How to fully fit frustum.planes to CameraHelper
How to clip model with frustum.planes?
Or am I doing something wrong and there is other way to resolve the issues?
Related
I would like to draw a plane in ThreeJS with a point (e. g. 0, 10, 20) and a normal vector for the plane orientation. I simply just do no get the position or the orientation right. Please help me out. Regards
Here are two ways I've tried (with PlaneHelper):
const plane = new THREE.Plane(new THREE.Vector3(10, 10, 10), 3)
// does not work: planeObj.translate(new THREE.Vector3(100, 100, 100))
const helper = new THREE.PlaneHelper(plane, 50, 0x00ffff);
this.scene.add( helper )
Or without the PlaneHelper:
const geometry = new THREE.PlaneGeometry( 50, 50, 32 );
geometry.translate(100, 0, 0)
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
// normal orientation missing
Is there something equivalent to CSS's overflow: hidden in aframe? For example, can I constrain an entire to be within a bounding and have everything that is bigger than the box geometry to be hidden/invisible?
There is clipping planes: https://threejs.org/examples/webgl_clipping.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_clipping.html
// ***** Clipping planes: *****
var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
// Geometry
var material = new THREE.MeshPhongMaterial( {
color: 0x80ee10,
shininess: 100,
side: THREE.DoubleSide,
// ***** Clipping setup (material): *****
clippingPlanes: [ localPlane ],
clipShadows: true
} );
var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
object = new THREE.Mesh( geometry, material );
I have an issue while using PhysiJS and Three JS, I can't handle collision event.
Repository on Github : https://github.com/kevrmnd/soccer-physics (in script.js file)
I have a ground and a ball, I put an eventlistener on the ball which should alert or log something when it falls on the ground but there is no output.
Here is how I set scene and gravity :
scene = new Physijs.Scene({ fixedTimeStep: 1 / 120 });
scene.setGravity( new THREE.Vector3( 0, -30, 0 ) );
Here is my ground :
loader = new THREE.TextureLoader();
// Materials
ground_material = Physijs.createMaterial(
new THREE.MeshStandardMaterial({ map: loader.load( 'img/grass.png' ) }),
1,
0.6
);
ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
ground_material.map.repeat.set( 4, 4 );
// Ground
ground = new Physijs.BoxMesh(
new THREE.BoxGeometry( 30 , 1, 60 ),
ground_material,
0
);
ground.receiveShadow = true;
scene.add( ground );
And finally my ball :
shape_material = Physijs.createMaterial(
new THREE.MeshNormalMaterial(),
0.5, // low friction
0.8 // high restitution
);
shape = new Physijs.SphereMesh(
new THREE.SphereGeometry( 0.5, 25, 25 ),
shape_material,
0.75
);
shape.addEventListener( 'collision', function(){
alert( 'hey' );
} );
shape.position.z = 20;
scene.add( shape );
I really don't understand why this doesn't trigger an event. I need your help :-)
Ok I found the solution here : https://github.com/chandlerprall/Physijs/issues/248
Just had to modify two lines in physijs_worker.js file !
I have this code, it works perfectly:
mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/texture01.jpg' ) } ) );
mesh.scale.x = -1;
scene.add( mesh );
But when the material change to MeshLambertMaterial, the object is not displayed and no shows errors.
I need it for this type of material to play with the opacity ..
Thanks!!
I'm experimenting with the createMultiMaterialObject function in THREE.js to create shaded objects that also display a wireframe. The problem is the lines appear broken & don't seem to respond to the wireframeLinewidth parameter.
My materials are defined as follows:
var mat1 = new THREE.MeshBasicMaterial( { color: 0xd02000, transparent: true, blending: THREE.AdditiveBlending } )
var blackLines = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 4 } );
And the object is here:
var object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
object.position.set( -100, 150, 0 );
scene.add( object );
But this produces this result:
Any help would be appreciated. Thanks!
Your code is fine. Are you running Windows? If so, it is possibly an ANGLE issue, in which case the line width cannot be changed. See this related question.
If you are unable to increase the line width, a work-around in your case is to make the wireframe mesh just a bit larger than the solid mesh, like so:
object.children[ 1 ].scale.multiplyScalar( 1.01 );
If you do that, there will be no more broken lines and it will be beautiful. :-)
three.js r.55