Since I still can't comment on this answer, I'll make a new question.
Previous iterations of r74dev allowed you to have an environment map and fake some sort of IBL, allowing you to have an unlit scene looking nice (in both examples, a single white directional light is at the left, just for the demo, the right part is how it looks unlit).
This was fine for the little project I was doing, but now, lightning is taken into account, relegating the environment map to "just" that.
Is it possible to replicate the functionality so that it works with the final r74 release?
The r74dev I use have some quirks such as having to set roughness to -0.999 so the surface is fully smooth, and I understand the behaviour in general wasn't the most correct one.
EDIT: New pics and JSFiddle of the pics, here.
Change the script tags in the HTML to switch between versions:
<!-- Current development three.js -->
<script src="https://rawgithub.com/mrdoob/three.js/dev/build/three.js"></script>
<!-- Three.js from the 8th of november -->
<script src="https://rawgithub.com/mrdoob/three.js/becea58835be00da49fae6695098769300689766/build/three.js"></script>
Thanks for the help
Related
I am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. ((https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html))
The issue I am running in to is that this is occuring.
Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn't generally this dark.
This is another example with higher exposure and settings 1: https://i.stack.imgur.com/KUPW9.jpg
An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.
Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.
Github
Don't worry about how messy the code is im just trying everything here lol
VERY IMPORTANT
I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error
Goal: I want to create a Web based experience where the user need to see a series of elements on the scene and later, I want to leave the user explore alone.
I have several objects around the scene and I want the camera to look at them one by one. I am using the lookat() method but is not working correctly. I found this example on Threejs:
http://jsfiddle.net/L0rdzbej/135/
But my example is not working like the previous example.
After the answer of #Mugen87 is working but with a little modification:
document.getElementById('cam').sceneEl.camera.lookAt
Access the camera in this way. You can see the example here:
https://glitch.com/~aframe-lookat-cam-not-working
Please click on the button "animate camera".
As mentioned in this thread, you have to remove or disable look-controls if you're overriding camera rotation manually. So you can do:
var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});
to disable the controls, perform your lookAt() operations, and then enable the controls via:
cameraEl.setAttribute('look-controls', {enabled: true})
I finally could make it worked. I am new in Threejs and aframe and surely I don't understand rotation, positions,world coordinates good enough but I think I did a decent work. Here the link:
https://glitch.com/~aframe-lookat-camera-working
I hope will be useful for somebody on the future.
In three.js I want to create a portal effect - where looking through the portal would mask some objects and not others.
For example, you look through the portal and you could see a different world.
I'm new to three.js, and i've experimented with alphaMap and clippingPlanes but i think my approach is incorrect.
This example below shows what i have on the left with the desired effect on the right.
This is a good example - https://www.magicleap.com/
Thank you for your direction
I'm trying to make a simulation consisting of many lines. Up until now I had Three.js v45 and Trackball Controls and it worked fine.
I then tried to implement my lines in a buffer geometry (as in this example: http://fzwoch.project-sheol.org/three.js/examples/webgl_buffergeometry_lines.html)
but for that I needed to update to the newer Three.js build. And Trackball Controls doesn't work anymore! Am I missing something? How can I get both to work?
Thank you,
Kasia
First have you noticed that the controls changed location? Now you have to add in your html file:
<script src="three.js/examples/js/controls/TrackballControls.js"></script>
You should also check the migration notes https://github.com/mrdoob/three.js/wiki/Migration to see if anything else changed for your code from the r45 release to r55 (current).
I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.