I have a shader working on a scene (using the EffectComposer method), with a simple cube rotating in it.
When I only render my renderer, the cube has high resolution :
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
When I render my composer without any setting, my shader is working but my cube get pixelated. So I tried this : https://github.com/mrdoob/three.js/issues/10238
Here it is ( I set the size of the composer depending of the pixel ratio screen value) :
let pixelRatio = window.devicePixelRatio || 0;
composer.setSize(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);
But after this my scene become very small as you can see bellow (black screen is my entire window).
Does anyone has any leads of what my problem is ?
Thank you
Related
I set up a simple glb viewer with three.js. The model casts and accepts shadows. The problem is that dark boxes appear once I set a spotLight. I'm not sure what the problem is.
I uploaded the project here: https://github.com/maxibenner/threejsviewer
Configuring proper shadows can sometimes be difficult.
var spotLight = new THREE.SpotLight(0xffa95c, 2)
spotLight.castShadow = true
spotLight.position.set(2,2,-2)
spotLight.angle = Math.PI * 0.1;
spotLight.shadow.camera.near = 1;
spotLight.shadow.camera.far = 4;
spotLight.shadow.bias = - 0.002;
spotLight.shadow.mapSize.set( 1024, 1024 );
The idea is to move the spot light closer to the model and tighten the shadow camera's frustum as good as possible. The bias configuration is necessary to avoid self-shadowing artifacts. A bigger shadow map size (default is 512x512) sharpens the shadows.
As mentioned in the comment, adding an instance of CameraHelper to your scene is very helpful when optimizing shadows:
scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
I have a scene with one mesh with PNG textures. I taken PointLight code from ThreeJS example and added to my project:
var intensity = 15;
var pointLight = new THREE.PointLight( color, intensity, 20 );
pointLight.castShadow = true;
pointLight.shadow.camera.near = 1;
pointLight.shadow.camera.far = 60;
pointLight.shadow.bias = - 0.005;
But I not see light and shadows on my mesh:
I created a codepen for reproduce this case
How I can resolve this issue?
There were multiple problems with your pen:
You have to tell the renderer to globally enable shadow maps like so:
renderer.shadowMap.enabled = true
You have to tell the extruded shape to receive shadows:
mesh.receiveShadow = true;
The extruded shaped used MeshBasicMaterial in your pen. This is an unlit material which means it does not react on lights. The codepen below now uses MeshPhongMaterial. You might want to consider to add an ambient or hemisphere light so all parts of your mesh are lit.
Codepen: https://codepen.io/anon/pen/vPPJxW?editors=1010
three.js R102
While rotating camera, lens flare has some rotation based on camera angle, please see this fiddle: http://jsfiddle.net/e4kf3u7t/1/
I want to avoid that, making lens flare always facing camera without rotation, like Sprite behavior: http://jsfiddle.net/e4kf3u7t/3/
Sample code:
var flareColor = new THREE.Color( 0xffffff );
var lensFlare = new THREE.LensFlare( textureFlare0, 200, 0.0, THREE.NormalBlending, flareColor );
lensFlare.position.y = 100;
lensFlare.position.z = 200;
scene.add(lensFlare);
The reason why I want to use Lensflare instead of Sprite is as you can see in fiddle, lens flare disappearing when it center hiding behind another geometry, Sprite doesn't act like that.
I am composing 2D planes with textures. I have 3 levels.
A background plane at z=0,
black shapes for conections at z=0.1 and
small planes with textures at z=0.2
the problem is that when I move the camera planes seems to change z position.
Planes are drawn in incorrect Z, it depend on the position of the camera. Moving the camera it changes again and looks very ugly.
Maybe I need to activate some ZBuffer property for correct drawing
WebGL init is like this and planes are exactly the same (only Z coord change)
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer._microCache = new MicroCache(); //cache de imagenes
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);
// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1300).normalize();
scene.add(directionalLight);
//background plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(200000, 200000, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff, opacity: planeOpacity, transparent: true }););
plane.position.z = 0;
scene.add(plane);
Other planes are exactly the same but greater Z position
Help please!
Thanks!
Palomo
The thing you're seing is probably z-fighting. Internally, depth is represented by integer in GPU so there is only fixed number of distinct z-s between camera's near and far planes. The solution is to either move your planes apart or narrow camera's near-far range down.
I am using Three.js 57 version. Now I am working in animation using JSONLoader. I got the animation successfully. But I want to update full vertex color of mesh for each frame in animation. Is this possibe in three.js
Thanks in Advance
Vertex colors are currently not supported in CanvasRenderer.
Here is the pattern you need to follow for WebGLRenderer:
Set THREE.VertexColors when you create the material for the mesh;
material.vertexColors = THREE.VertexColors;
Also make sure that vertexColors are defined for each face of your geometry.
geometry.faces[ faceIndex ].vertexColors[ vertexIndex ] = new THREE.Color( 0xff0000 );
Then in your render loop, to change a vertex color, do this:
geometry.faces[ faceIndex ].vertexColors[ vertexIndex ].setHSL( Math.random(), 0.5, 0.5 );
mesh.geometry.colorsNeedUpdate = true;
three.js r.59