Three.js disable lighting - javascript

I want to disable lighting entirely in three.js, and render a 3D object. Currently, since lighting is active in some form, the object appears completely black. I have no calls to any sort of lighting currently in my program, and I have been unable to find a solution with searching.
Edit: Code
var white = 0xFFFFFF;
var facemat = new THREE.MeshBasicMaterial( { color: white, opacity: 1.0, shading: THREE.FlatShading } );
vrmlLoader.addEventListener('load', function ( event ) {
var object = event.content;
object.material = facemat;
scene.add(object);
});
vrmlLoader.load("ship.wrl");
My questions for this particular post have mostly been answered. If I am to ask more I will drive this post off topic.

Shading / lighting take care of drawing an object in such a way that you can perceive its depth. In your example picture, shading is disabled - there is no depth, the object is the same everywhere - you cannot differentiate parts of it.
Now, it should be pretty obvious that you can't draw stuff without colour - just like you can't draw on a piece of paper without pencils or any other tool. What you are seeing is simply your object drawn with black colour. What you want to see is your object drawn in white, which is almost the same but if you do that currently, you'll see nothing since your background is white!
Anyway, after those clarifications, here is a how-to:
Change the background colour of your renderer to white:
renderer.setClearColor(0, 1)
Change the colour of your object by changing its material:
object.material = new THREE.MeshBasicMaterial(0xFFFFFF)

Related

Three.js Materials are reversed depending on direction of view

I am using Three.js to model a home. The idea is that I can show the home to an architect and discuss it further. The project is supposed to be walkable, so I put together it all on this site. If you visit the site to view the code, use arrow keys to move horizontally relative to the grass, use W/S to move up/down, and A/D to yaw view.
https://bsdillon.github.io/cs200_Spring2020/ThreeJs/solarhouse.html
I was able to make panels (cubes actually) and put textures on them. Everything looks great except that the walls look different depending on the direction of view. See the image below. I added a red line and yellow triangle to help make the geometry more obvious. The image on the left shows the external view of a panel with a clapboard exterior and an open doorway on the left. The image on the right shows the same panel viewed from inside the structure. You can see that from inside the door is still on the left (it should appear on the right) and the stick frame interior also appears to be reversed.
I never noticed this before, but it appears to be the standard for the way I set up these panels. Apparently I'm doing something wrong. The question is how can I show the texture so that the views will be consistent.
var materialArray = new Object();//I set up an object I set up to store materials
function makeMaterial2(filename, repeatX, repeatY)//a method for creating materials from an image file
{
var m = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( filename ), transparent: true, opacity: 0.9, color: 0xffffff });
return m;
}
//two examples of the material creation I implemented
materialArray["rDoor"] = makeMaterial2("doorRight.png",false,false);
materialArray["crDoor"] = makeMaterial2("doorRightClapboard.png",false,false);
function drawPanel2(x,y,z,x2,y2,z2,str)//this funciton creates a cube with the material in question
{
var cubegeometry = new THREE.BoxGeometry(Math.abs(x-x2),Math.abs(y-y2),Math.abs(z-z2));
var cube = new THREE.Mesh(cubegeometry, materialArray[str]);
cube.position.set((x+x2)/2,(y+y2)/2,(z+z2)/2);
return cube;
}
//adding the panels to the scene with the materials
scene.add(drawPanel2(-10,level,front,0,level+height,front,"rDoor"));
scene.add(drawPanel2(-10,level,front+margin,0,level+height,front+margin,"crDoor"));
You are using a simple BoxGeometry that has standard UV texture coodinates. A texture mapped on this geometry will look the same from all sides (see box example). However, you want that the open space of the door is at the same position. You could do one of the following to achieve that:
Apply different materials and textures to different sides of the box. The 6 sides of BoxGeometry are already indexed for multi material usage.
a) You'll have to flip a texture in an image editing software and save it separately. Load these multiple textures.
b) Clone the texture and set texture.wrapS = THREE.RepeatWrapping; texture.repeat.x = - 1; to flip it (How to flip a Three.js texture horizontally).
Create an array of 6 materials each with its according texture and pass it to the Mesh.
Change the UV texture coordinates of BoxGeometry, such that one side will show the texture flipped.
Your boxes are flat. 4 sides aren't visible. Instead of a BoxGeometry, you could also create a PlaneGeometry. Set material.side: THREE.DoubleSide such that the plane will be visible from both sides. Following this approach, you'll have to rework your drawPanel2 method, because you can't just flatten one side of the geometry, but you have to rotate the plane according the intended orientation of the panel.

Apply a glow effect onto a THREE.TextGeometry object in Three.js

I have done quite a few hours of google search to see if this can be done
within the three.js environment.
I want to create a glow effect based on a TextGeometry and not a simple primitive like a sphere or cube object similar to the one in Lee StemKoski - shadow glow example below.
I have been reading and experimenting with Lee StemKoski examples
In particular with his Shader Glow example which as stated works well with simple objects but not with complex geometric shapes. Therefore I was wondering if there are any work arounds to this or other suggestions to how one could create a glow effect around text.
regards
w9914420
UPDATE: I decided to go with the mapping concept by attaching an image to the text I can create a glow effect. In this example I used a circle, but should not be too difficult to do a map for the text that I need.
UPDATE: 20/3/17 - So I had an attempt at using the theeX.atmosphere material to create that elusive text glow effect. Here are some of the results.
As you can see not quite there yet - the issue that I have is I am not able to smooth the vertices of the outer glow text more. I am not sure if it is possible any advice appreciated.
Native code used to create effect.
//normal text created
var geometry2 = threeLab.asset.simpleText('hello','my_font');
var materialme = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry2, materialme );
this.scene.add( mesh );
// we create a secondary text object to use as glow
var geometry = threeLab.asset.simpleText('hello','my_font');
// clone for manipulation
var geoclone = geometry.clone();
//Thes functions are need to make it work in this case
geoclone.mergeVertices();
//geoclone.computeCentroids();
geoclone.computeVertexNormals();
geoclone.computeFaceNormals();
// part of threex library to make the glow scale and expand
THREEx.dilateGeometry(geoclone, 0.5);
var materialz = THREEx.createAtmosphereMaterial();
var meshHalo = new THREE.Mesh(geoclone, materialz );
//we have now our glow
this.scene.add( meshHalo );
So In the end I increased the bevelsegments of my secondary TextGeometry object which helped to smooth it. I was then able to encase my first text into the second like so:
With further tweaking I will be able to get the glow effect more subtle, but for now the effect works.
Thank you all for the input :)

How to make a 'Flash' effect over a Sprite in Phaser.js?

I'm creating an Rpg in Phaser, and I'm trying to make a Flash effect happen over a Sprite -that means turning the Sprite all white for a moment and then returning to its original color-.
So my question is: what's the best way of achieving this effect?. I've tried two solutions so far, but i'm missing something:
Solution 1:
I tried tweening the tint parameter of the sprite, like this:
this.game.add.tween(enemy).to({
tint: 0xffffff,
}, 100, Phaser.Easing.Exponential.Out, true, 0, 0, true);
But it doesn't work since setting the tint to 0xffffff is the same as setting it to its default color.
Solution 2:
My second possible solution is adding a white square that has the same size of the sprite, and using the actual sprite as a mask for the square:
var flash = this.game.add.graphics(0, 0);
flash.beginFill(0xffffff);
flash.drawRect(enemy.x, enemy.y, enemy.width, enemy.height);
flash.endFill();
flash.mask = enemy // enemy is my Sprite
/* .. code for tweening the flash */
The problem with this solution is that the mask needs to be a PIXI.Graphics object; and I'm using a Sprite object.
So please, any guidance would be appreciated.
In the version of Pixi that Phaser 2.2.2 uses there is a 'tintCache' which basically rounds the tint value, then caches the result. This means you can't do subtle tint ramping like you're trying to do with a tween. We removed this in Phaser 2.3, so it will be available from then, but as of now it's still in dev.
Also you can tint to a 'near white' colour - only 0xffffff precisely resets the tint. But a value very close to that would still be set ok and probably have the desired result.
If you're using WebGL I would still use a tint with 'as near as white as possible' colour values and tween them. You could disable the tint cache for yourself by copying that part of the changed code from the Phaser dev branch.
In Canvas mode it's expensive though as it has to recalculate the pixels every single time you update it.
If you need to worry about Canvas performance then honestly I would create a new PNG that matches your sprite, colour it in all-white and display it over the top of your main sprite as needed and alpha it out. It's less than ideal because of the extra assets required, but it would be the fastest in canvas mode for sure. All depends on your game though is that's acceptable or not.
Edit: Also occurred to me that you could probably achieve what you need by using a blend mode too, such as lighten. You'd duplicate your main sprite, set the blend mode on it, display it over the top of your sprite and fade it out. This would work fine in Canvas at least.
You can use a ColorMatrixFilter on the Sprite. In Phaser, you may have to manually load in the PIXI script first:
game.load.script('filter', 'js/filters/ColorMatrixFilter.js');
Use this for white:
var filter = new PIXI.ColorMatrixFilter();
filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1];
this.game.filter = [filter];
You can also tween the matrix values if you want a smooth transition.

Three.js custom geometry raycaster catches wrong object

I need to use my own gemetry since the default cube does not look like it should in wireframe mode (now it is made of triangles instead of squares).
So I made my own geometry and it looks ok, but the raycaster does not work as good with my own objects as it does with the built-in cubes.
var cube = new THREE.Line( getCube( 5,5, 5), new THREE.LineDashedMaterial( { color: 0x000000,dashSize: 1, gapSize: 0.1, linewidth: 2 } ),THREE.LinePieces );
where getCube() returns
var geometry = new THREE.Geometry()
See example:
http://jsfiddle.net/QHjSM/12/
6 colour filled box on the top are the defalt THREE.CubeGeometry boxes, and selecting them with raycaster works perfect, 6 wireframe are my custom geometry.
Issues:
If you try to click outside the box, but pretty close to it it will catch the box, and if you click inside the box (in the middle of it) it will not catch it neither.
But the most annoying thing is that if you click inside one box, but close to another one sometimes it catches not the wrong one.
I'm not sure can it be done better, tried all the geometry.compute... methods, but still no effect.
Good day, your custom cubes are not in fact cubes. They are just a stack of lines with no cooresponding faces. Your selection is not returning as expected due to the fact that your "cubes" indeed have gapping holes right threw them. What you can do is in your getCube function after you've built the vertices you can then build all your faces in a similar way.
Have a look at this example: Issue with custom geometry and face normal
Generally you'll need to carefully pattern out every 3 set of vertices so that when you build the faces there in a clock-wise direction so that the normals will be computerd correctly. Here's a basic example of adding a face.
geometry.faces.push(new THREE.Face3(1,2,3));
BUT! Note that this will result in the same aforementioned diagonal lines through your wireframe. So, for your use case why not simply use both the basic cube mesh with picking and remove the wireframe then overlay the line drawn boxes as your custom wireframe. Best of both worlds.
FYI, you probably already know but Face4 is gone, so you'll need to use Face3 and some sort of custom wireframe to do this anyway.
Edit:
I did a little test to your fiddle, noticed something strange. Using the CanvasRender, even with the wireframe off the default cube you still see the diagonal lines! I try WebGLRenderer and it's fine. I'll have to look into that one further.
CanvasRenderer
http://jsfiddle.net/QHjSM/13/
WebGLRenderer
http://jsfiddle.net/QHjSM/14/
Me again, hmm it appears those ghosted face lines are visible in all the CanvasRenderer examples that use a MeshBasicMaterial on the Three.js site. The only thing I was able to do was simply reduce the opacity of the cube mesh material to 0.1 to lessen the effect. I suppose the only other method is to switch to the WebGLRenderer but I look forward to being wrong on this :) Here's the last test
http://jsfiddle.net/QHjSM/16/

I'm doing something wrong with SpotLights and shadows in Three.js

I have a really simple scene which has one .dae mesh in it, and a 7000*7000 plane underneath the mesh. I'd like it to be lit by a high SpotLight, so the mesh throws a shadow on the ground. But, something seems to be broken! No matter how high I put the SpotLight, it never lights up the plane! Also, it lights the mesh up only a little, while it is in a small square (perimeter).
You can see the situation here:
As soon as I move the mesh (a monster) around, it wont be lit anymore.
This is how I instantiate the light:
// create a spotlight
self.spotLight = new THREE.SpotLight();
// set its position
self.spotLight.position.y = 1000; //I recon it needs to be relatively high so it lights up everything
self.spotLight.position.x = 0; //(0, 0) are the coordinates where the mesh is spawned, and are the center of the plane
self.spotLight.position.z = 0;
self.spotLight.castShadow = true;
This is how the plane is made:
//The plane.
self.plane = new THREE.Mesh(new THREE.PlaneGeometry(self.groundSize, self.groundSize), new THREE.MeshLambertMaterial({color: 0x5C8A00}));
self.plane.receiveShadow = true;
self.plane.position.x = 0;
self.plane.position.y = -26;
self.plane.position.z = 0;
Also, here's another picture, this time, I've added a lot of PointLights:
You can see how the shadow still disappears!
Now, what am I doing wrong here? AFAIK, light should disperse equally in all directions! And also, there is another problem, I seem to be unable to add multiple SpotLights on the scene! Everything slows down completely if I do so - is this intended? Maybe it's because I enabled shadows on all of them...
#Neil, the same thing happens in your code as well!
I have created a jsfiddle showing a plane with Lambert material and a rotating cube that is casting a shadow, maybe you can see what is different to yours.
edit
Try playing about with some of the params, I can stop the clipping on my demo with:
spotLight.shadowCameraFov = 70;
update demo and moving demo

Categories