Outlines are not being created. I attempted a BloomFilter as well and it looks the same as if I didn't add any filters.
What could be the issue here?
// in global scope
const clock = new THREE.Clock();
// in initialization
this.composer = new EffectComposer(this.renderer);
this.composer.addPass(new RenderPass(this.scene, this.camera.camera_object));
this.composer.addPass(new EffectPass(this.camera.camera_object, new OutlineEffect(this.renderer, this.camera.camera_object, {
defaultThickness: 0.01,
defaultColor: [0, 0, 0],
defaultAlpha: 0.8,
defaultKeepAlive: true
})));
// in render loop
this.composer.render(clock.getDelta());
It is hard to see the error without a full sample of the code. PostProcessing effects require the following:
Load the postprocessing lib. In the example below I provided the full URL to for effects.
Create the effect pass. A new THREE.OutlinePass or new THREE.UnrealBloomPass or similar.
Add effect with composer.addPass([your_pass]).
Here is a minimal CodePen sample using both a OutlinePass and UnrealBloomPass:
https://codepen.io/adelriosantiago/pen/qBaLmZK?editors=1010
Note that OutlinePass requires selectedObjects to be an array with the objects that you want to affect.
Related
I am running a three.js example code, its three.js version is 0.124.
createObj() {
const geometry = new THREE.InstancedBufferGeometry();
const baseGeometry = new THREE.BoxGeometry(2, 2, 20, 2, 2, 6);
// Copy attributes of the base Geometry to the instancing Geometry
geometry.copy(baseGeometry);
}
when the code is running in 'geometry.copy(baseGeometry);', an error is popping up as showed as
TypeError: Cannot read properties of undefined (reading 'clone')
at InstancedBufferGeometry.copy (three.module.js?cf64:10935)
at InstancedBufferGeometry.copy (three.module.js?cf64:40628)
at createObj (Clouds.js?d048:24)
InstancedBufferGeometry.copy() only accepts another InstancedBufferGeometry object as the argument. You're trying to pass a legacy Geometry object (THREE.Geometry was part of the core up until r125, and you're using r124), so it breaks when performing that method when it notices that it's missing all the instancing properties.
See here in the docs for using the copy() method
I have a question about updating geometry in three.js using dat.gui.
I expected I could update the geometry by updating the value tied into the geometry by object as below.
gui.add(parameter, 'width')
.min(1)
.max(10)
.step(0.1)
.name('cubeWidth')
.onChange((value) => {
mesh.geometry.dispose();
geometry.parameters.width = parameter.width
console.log(mesh)
})
However, it updates the geometry only when I redefine the geometry like below.
mesh.geometry = new THREE.BoxGeometry(parameter.width, 1, 1);
It's bit weird to me because even when I log the geometry data both shows the updated width value like below.
Why does only the first approach work while the other one not work?
geometry.parameters.width = parameter.width
This has no effect. Parameters are only processed when a geometry is created. The parameters property is in fact read-only.
The solution for your issue is indeed to recreate the geometry with the new set of parameters.
I'm looking into making kind of a portal effect using Three.js.
The main idea is to be able to see through multiple windows another Scene.
Exactly like in this example :
https://www.ronja-tutorials.com/post/022-stencil-buffers/ (See gif in article, too big to upload here)
I found an exact example of what i'm trying to do using three.js.
Here is the link :
https://sites.google.com/site/cgwith3js/home/masking-with-stencil
The fiddle was not working but I changed it to make it work :
http://jsfiddle.net/yzhreu6p/23/
scene = new THREE.Scene();
sceneStencil = new THREE.Scene();
...
scene.add(box); // red one
...
function animate() {
requestAnimationFrame(animate);
renderer.clear();
// animate the box
box.position.x = Math.cos(clock.getElapsedTime()) * 10;
var gl = renderer.getContext();
// enable stencil test
gl.enable(gl.STENCIL_TEST);
//renderer.state.setStencilTest( true );
// config the stencil buffer to collect data for testing
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
// render shape for stencil test
renderer.render(sceneStencil, camera);
// set stencil buffer for testing
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
// render actual scene
renderer.render(scene, camera);
// disable stencil test
gl.disable(gl.STENCIL_TEST);
}
Then I reuse the code in my project where I have kind of a town with buildings, and the hidden scene has a nyan cat textured box.
The problem I'm having is that the planes are disappearing when a building is behind and more serious problem, when there are buildings back the nyan cat texture, we see the texture in the building.
To better explain here is an image
I'm looking for a solution where the images are not visible inside the building, I found people that are talking about stencilMask but it's new for me.
Do I need to create another scene to make it work independently ?
If someone can help me, thank you for reading.
I'm creating a scene where objects are brought in from JSON files (exported from blender) and added to the scene. Since this is going to be a Cordova app, I can't use JSONLoader (or any XHR resource).
I'm able to get the JSON file using the FileSystem API, but I can't figure out how to create a THREE.Geometry object from the JSON, since the Geometry constructor does not take any arguments. (normally, the finished Geometry object is provided automatically by the JSONLoader callback function). I can't help but feel there's something obvious I'm missing. Any suggestions?
Option 1:
You can build your own THREE.Geometry object by manually adding its attributes. The docs give you a quick example of how to add vertices and faces:
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( -10, -10, 0 ),
new THREE.Vector3( 10, -10, 0 )
);
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.computeBoundingSphere();
With this example, you could write your own iterators, and create your Geometry with the data in your JSON file.
Option 2:
The above process is probably going to get too verbose if you need normals, uvs, colors, etc. So instead of re-writing it manually, just use the JSONLoader's parsing attributes, without using it to load the data. This is possible via the THREE.JSONLoader.parse() method:
// Use whatever method you're using to fetch the data
var JSONData = getJSONSomehow();
// Now we only use JSONLoader for parsing
var JSONParser = new THREE.JSONLoader();
var myObject3D = JSONParser.parse(JSONData);
scene.add(myObject3D);
I'm beginner in WebGL
I follow the examples and I always get error.
Why my example does not work.
While it works for the others with similar code?
(function() {
// Set basic some variables.
var documentWidth = document.body.clientWidth,
documentHeight = document.body.clientHeight,
viewAngle = 45,
drawNear = 0.1,
drawFar = 10000,
aspectRatio = documentWidth / documentHeight,
renderer = new THREE.WebGLRenderer(),
scene = new THREE.Scene();
... follow jsfiddle
you did not include three.js. https://jsfiddle.net/2pha/naudwtaL/1/
https://rawgit.com/mrdoob/three.js/master/build/three.min.js
The older design of jsfiddle made it easy to include some external libraries by having a combobox for you to select from.
The new design has moved these options as seen in the below picture.
While you can add three.js via the combobox selector thing, as of now you can only include three.js r54 which is quite old, so you are probably better off including it the way I did in the fiddle I linked to.