The shadows in my scene get messed up by including a MaskPass (even though there are no shadow casting objects or lights in the scene/cam referenced by the MaskPass).
composer.addPass( clearPass );
composer.addPass( renderPass_background );
composer.addPass( maskPass1 ); // this is the problematic line
composer.addPass( renderPass_foreground );
composer.addPass( clearMaskPass );
composer.addPass( outputPass );
I believe my problem is related to How to turn off shadows in MaskPass? (I'd comment on that but don't have the street cred / 50 rep on here). It seems that extra draws shadow draws are triggered and my THREE.ShadowMaterial / shadow quad starts to fill up.
I've already edited the three.js source code a little but we'd ideally like to stick to the vanilla code if possible. Is it possible to resolve shadow map writing in the MaskPass without source code modifications?
I fixed this a few weeks ago in our local version of r86. I did that by passing through a noShadows bool/argument to WebGLRenderer which branched the control calls to WebGLShadowMap.render. A recent update to r87, however, brings the issue back since WebGLShadowMap has been extensibly modified.
Related
I'm trying to adapt my existing three.js project to work with WebVR. I've made decent progress -- I can look around the scene in VR, but I'm unable to move the camera position away from the initial place it gets spawned (which appears to be close to 0,0,0, it seems like there is a predefined userHeight that gets factored in)
Once I call renderer.vr.setDevice( vrDisplay ) it seems like a new camera is created and the existing camera that my scene was using is no longer used. I'd like to keep using that camera, or at least inherit most of its properties.
I've noticed that there is a renderer.vr.getCamera() method (link to source) but I haven't found any examples or documentation of how to use it (or if I should use it). Curiously, this method accepts a camera as an argument, which is a bit unintuitive for a getter. Looking at the code, it seems like the function should be called setCamera and left me a bit confused. I tried calling the function and passing in my existing camera but it had no effect.
Any help is appreciated. I am using a Google Daydream View on the latest version of Android/Chrome using Three.js R91
swirlybuns, Mugen87 solution works as long as you add user to the scene
var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);
and on render loop
user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;
Tested on
Three.js v102
chrome mobile v75
So, the scene include an earth spinning on its axis, a moon rotating around the earth, and a light source to the right that will help to simulate the effect of an eclipse. I thought it would be easy because we've done shadows and transformations before but I ran into a problem.
In our template we have the following at the top:
// For the assignment where a texture is required you should
// deactivate the Detector and use ONLY the CanvasRenderer. There are some
// issues in using waht are called Cross Domain images for textures. You
// can get more details by looking up WebGL and CORS using Google search.
// if ( Detector.webgl )
// var renderer = new THREE.WebGLRenderer();
// else
var renderer = new THREE.CanvasRenderer();
My problem is, when I leave it like that, the spotlight doesn't appear on the scene. However, as was warned, if I activate the Detector, the textures won't work.
But I need both textures and the spotlight. How do I work around this?
You are confusing yourself. Detector.webgl only checks for support of WebGL on the browser. The code below uses the WebGL renderer if the current browser supports WebGL and CanvasRenderer if there is no WebGL support.
if ( Detector.webgl )
var renderer = new THREE.WebGLRenderer();
else
var renderer = new THREE.CanvasRenderer();
With WebGL - loading textures will run into a cross domain issue. Best to then execute the code either on a web server or a local server like http://www.wampserver.com/en/ for Windows or https://www.mamp.info/en/ for Mac. Or npm-package like https://github.com/tapio/live-server.
As far as I know shadows are not supported on the CSSCanvasRender. I would ask your assignment head to clarify.
I have a static scene with no animation loop, and am trying to use the change event of TrackballControls to trigger the render function following the pattern in this thread, i.e.:
var controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
function render() {
renderer.render( scene, camera );
}
This works well with OrbitControls, but the change events don't fire when I substitute TrackballControls. However, if I add the line:
_this.update();
at the end of mousewheel(), mousemove(), and touchmove() functions in TrackballControls.js, I can get the change events to fire correctly (in my case, anyway). I am not sure if this is the best way to get the change events firing. Is forking a local copy of TrackballControls the best solution for this case, have I overlooked something, or does it make sense to change TrackballControls.js?
TrackballControls was written to require an animation loop in which controls.update() is called.
OrbitControls, on the other hand, can be used in static scenes in which the scene is rendered only when the mouse is moved, like so:
controls.addEventListener( 'change', render );
In either case, the controls are part of the examples -- not the library -- so you are free to hack them to your liking.
What you are proposing is fine if your scene is static and there is no damping required.
EDIT: corrected for three.js r.73
I'm viewing a scene using threejs and the trackball camera. I try to get the view matrix from the camera, but its matrixworldinverse isn't updating. I do call updateMatrixWorld in my render function. The matrixworld is updating, just not the inverse. Any ideas why?
You need to do it yourself:
camera.matrixWorldInverse.getInverse( camera.matrixWorld );
Make sure camera.matrixWorld is updated first. Note that by default, it is automatically updated by the renderer.
three.js r.58
How make an Update function in Three.js, like in Unity3d?
I mean, that i create an object:
var torus = new THREE.Mesh(
new THREE.TorusKnotGeometry(60,20,100),
reflectionMaterial
);
and when i click on the body, i change a reflectionMaterial. But the image don't change, i see a not changed reflectionMaterial (last figure). Always redrawing a render image???
Thank's for attention. Sorry for my English (I'm from Ukrainian).
P.S.: I work with Three.js onn my netbook and on (not my) notebook. On netbook i don't see a shaders. Why?? Did the Three.js support Shader Model number 3 and 0?
If I understand your question, you are having issues changing a material after you click on something? You may need to change a flag depending on if you already have a material or not, there are some dependencies - check the link below:
material.needsUpdate = true;
There is an article on How to update things in Three.js