I am working with react three fiber in a scene. This is the relevant code
<primitive castShadow recieveShadow name={"lampshade"} object={props.meshObject} position={[0, 0, 0]} />
<primitive name={"shadowCatcher"} object={props.shadowObject.shadowCatcherMesh} />
shadow catcher element is just a transparent plane under the actual object.
This is what I get in the scene.
I have purposefully left the light helper in the scene that shows the position of the directional light and the frustum planes of the camera.
The lamp should cast shadow onto itself, but it doesn't.
I know it's not fully inside the frustum planes, but even the part that is inside it is not catching any shadows.
I have tried changing the frustum planes, it doesn't help even if the whole object is inside it.
Am I missing any settings that enable shadows on the object itself?
Related
I'm trying to sync the camera orientation of one threejs scene with another by passing the world matrix of the first scene's camera to the second and then using
camera.matrix.fromArray(cam1array); //cam1array is the flattened worldmatrix of the 1st scene
camera.updateMatrixWorld( true );
However, when I print camera.matrixWorld for the second scene, it would appear that there has been no update (matrixWorld is the same as before the previous commands). The second scene does use OrbitControls so maybe they are overriding my commands, but I wondered if anyone could advise me on how to achieve the same world matrix for the second scene as the first?
I should also clarify that part of the issue is that it would appear that setting
camera.matrixAutoUpdate = false;
in order to prevent overriding seems to prevent OrbitControls from functioning corrrectly.
I am very bad at three.js - but I believe I have cobbled together a basic raycast on a set of objects, to select the object of interest.
http://designs.playgami.com/webgl_loader_fbx.html
I am now trying to have OrbitControls.js focus the target vector on that object, i.e., once selected, be able to orbit around that object. I have tried a few variations, where some lead to what appears to be an empty (or out of camera range) scene.
controls.target.set(obj.position)
where obj is the raycast object and controls is the OrbitControl instance.
The quick(?) question: how do you set the orbit center of three.js OrbitControl given an object from a raycast?
It turns out that the fbx model on raycast seemed to return one of its child objects in the child object's coordinate system (though the material coloring seemed to color the whole object). Setting it to the parent seems to have solved it.
Check to see if it's a child object or child segment that is returning the same local coordinate
for controls.target setting, the vector3 is an object that needs to be copied .copy (thanks #WestLangley)
I'm trying to make a simpler version of the threejs glTF loader example, loading just the duck. Here's what I've got. If you click and drag, my OrbitControls rotate the camera and the cube appears to rotate in response. The duck, however, just hovers, phantasmic, in the upper half of the window and just says put. What have I done wrong? I want the duck to behave the same as the cube.
Turns out I needed to add THREE.glTFShaders.update(scene, camera); into my animate() function.
I'm new to coding and everyday I learn something new. I want to have a masked scene with other 3D objects, that are from other scenes, to be behind and around it. At this moment I'm stuck with a masked scene. Right now I have this working. As u can see the background is grey and other 3D objects, that are from other scenes and behind the masked scene, can't be seen because of it.
How can I make the backround from masked scene to be transparent with other 3D objects from other scenes?
I think it has something to do with the fragmentShader, because I can change the background color by changing this line "vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",.
Thanks in advance for all the help!
Update
I understand that the background is transparent on this previous link, but I fail to create a new scene with new 3D objects that is visible and is outside the masked scene. Just helping me make a new scene on that previous link would help me out with my problem.
After messing around with this demo of Three.js rendering a scene to a texture, I successfully replicated the essence of it in my project: amidst my main scene, there's a now sphere and a secondary scene is drawn on it via a THREE.WebGLRenderTarget buffer.
I don't really need a sphere, though, and that's where I've hit a huge brick wall. When trying to map the buffer onto my simple custom mesh, I get an infinite stream of the following errors:
three.js:23444 WebGL: INVALID_VALUE: pixelStorei: invalid parameter for alignment
three.js:23557 Uncaught TypeError: Cannot read property 'width' of undefined
My geometry, approximating an annular shape, is created using this code. I've successfully UV-mapped a canvas onto it by passing {map: new THREE.Texture(canvas)} into the material options, but if I use {map: myWebGLRenderTarget} I get the errors above.
A cursory look through the call stack makes it look like three.js is assuming the presence of the texture.image attribute on myWebGLRenderTarget and attempting to call clampToMaxSize on it.
Is this a bug in three.js or am I simply doing something wrong? Since I only need flat rendering (with MeshBasicMaterial), one of the first thing I did when adapting the render-to-texture demo above was remove all trace of the shaders, and it worked great with just the sphere. Do I need those shaders back in order to use UV mapping and a custom mesh?
For what its worth, I was needlessly setting needsUpdate = true on my texture. (The handling of needsUpdate apparently assumes the presence of a <canvas> that the texture is based on.)