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
Related
I try to use threeGLTFLoader to load gltf ,problem with the material,the model is a man’s head but now i could see the back
here is the code:
var threeGLTFLoader = new THREE.GLTFLoader();
var objPositions;
threeGLTFLoader.load("../resources/untitled.gltf", function (gltf) {
model = gltf.scene;
model.name = "man";
model.scale.set(300, 300, 300);
root.matrixAutoUpdate = false;
root.updateMatrix();
root.add(model);
});
The link of 3D model
Without the model it's hard to guess what's going on here, but I'll wager a guess based on seeing this kind of back-is-in-front rendering before.
I think your glTF model probably has materials that are marked "alphaMode": "BLEND".
In most realtime 3D rendering systems, including ThreeJS, blended or translucent materials will disable the depth buffer, and can be rendered out of order. There are ways for some engines to fix or work around this, but they can cost performance and increase complexity.
For opaque materials in a glTF file, the best thing to do is leave alphaMode set to its default value OPAQUE. Only materials that really need to be translucent should be set to BLEND.
Ed Mackey’s answer on GitHub is a good explanation of why this is happening. If you’re the author of the model, it’s an issue you could fix by disabling transparency on parts of the model that aren’t meant to be transparent. If you’re not the author of the model, you can override the incorrect transparency settings after loading the model in three.js:
model.traverse((object) => {
if (object.isMesh) object.material.transparent = false;
});
This code will disable transparency everywhere on the model. In more complex cases you may need to select specific parts of the mesh to override, and that is easier to do in Blender, using Alpha Clip or Opaque modes.
I am attempting to modify the ThreeJS materials example seen here, and have been fairly successful so far in reverse engineering it in to my own minimalist demo.
The problem comes when I attempt to modify the materials.
I have changed mlib["Orange metal"] to the following:
"Orange metal": new THREE.MeshLambertMaterial( {
map: carTexture,
envMap: skyBox,
combine: THREE.MultiplyOperation
} )
carTexture is a reference to the following:
var carTexture = THREE.ImageUtils.loadTexture('texture/blue.jpg');
carTexture.wrapS = carTexture.wrapT = THREE.RepeatWrapping;
carTexture.repeat.set(3,3 );
carTexture.wrapS = THREE.RepeatWrapping;
carTexture.wrapT = THREE.RepeatWrapping;
And while this has changed my final output, the detail in the texture is missing.
For reference: here is the texture file:
Which clearly has a metalic flake texture.
Meanwhile my final product looks like this:
Completely smooth.
Yet, if I add a taurus with the exact same texture, I can see the details quite clearly:
I have played around with the dimensions of the texture file (up to several thousand percent), and the reflectivity of the MeshLambertMaterial, but not been able to see any change at all.
Your model needs UV coordinates.
On a model like this, it will need to be done in 3d software such as 3ds Max, Maya etc.
If you could get your hands on a version of the model which already has the correct UV coordinates set it would save you all the hassle.
Setting up UV coordinates is not so easy on a model like this if you have never done it before.
An alternative may be generate your paint flake in your shader (without using UV) rather than in a texture (I willl soon be attempting this myself for a personal project).
HERE are some youtube videos on UV unwrapping in 3ds Max
How can I dynamically turn on and off antialiasing and shadows in WebGLRenderer?
Simply changing the properties of anti-aliasing and shadowMapEnable does not work. I looked in the source and found a method updateShadowMap () but it was removed in release 69.
UPDATE: OK, the answer to the second half of the question I found here
https://github.com/mrdoob/three.js/issues/2466
As a result the following code works fine:
renderer.shadowMapEnabled = false;
for(var i in tiles.children)
tiles.children[i].material.needsUpdate=true;
renderer.clearTarget( sun.shadowMap );
You can't enable/diable antialiasing from a WebGL context after creation. The only way is to create a new context and submit all the buffers and textures again.
So, ideally you would only need to create a new WebGLRenderer with the antialias boolean. This doesn't work yet thought, but I'm working to have it working ASAP.
I have playing a little with clara.io and i want to reproduce an image done with it.
I have searched the web for days looking up to reproduce what they call "Realistic" rendering.
As you can see on the image the six round part have they own shadows on the (one piece) brick from multiple lights sources.
I have no idea how they done that, if it is a simple setup, or a complex shader.
the best i can do is that and i have no idea how to proceed to make and object shadowing itself depending of it's geometry.
any trails ?
actually you need:
renderer.shadowMapEnabled = true;
light.castShadow = true;
object.castShadow = true;
object.receiveShadow = true;
i know its a little counter-intuitive that both the light and the mesh have the same attribute "castShadow", but that's how it works.
also remember to check the near, far, and size of the shadow camera of your light if the shadow doesn't appear or appears incorrectly.
here is an example i made:
http://shahar.thenachts.com/threejs/examples/selfShadow.html
it takes some time to load the model (the model is the floor and walls) and it's textures, so be patient.
to see the code, right click anywhere and choose "inspect element".
ie. Actually it is a very simple setup. The THREE.Object3D has two attributes castShadow and receiveShadow You can achieve the effect you are looking for (ie. self-shadowing) by setting both to true
I have a problem with my Three.js 3D application - at least according to some people I know.
My application rests at [http://176.9.149.205/planungstool/]. Some people who supposedly have the most recent version of Chrome and Firefox, can not see the textured areas. For example, they do not see the roof or front of the 3D house. They do, however, see the non-textured stuff like the tree or the floor.
What's weird is that I don't have that problem and most of the other people I asked do not have it as well. Here is what it should look like and does look like for me: [http://176.9.149.205/planungstool/house.jpg]
Does anyone have an idea what could cause this? Could it be some client-side settings? Or maybe some access control policy?
I'm loading the textures like this:
var myTexture = new THREE.ImageUtils.loadTexture('gfx/textures/texture.jpg');
And then I just create meshes with lambert material that have this texture as their map.
If you read this and do not know what could cause this error, it would be nice if you could at least tell me if you see the textured areas or not, given you have a recent version of Chrome or Firefox.
I can see the textures on current chrome on mac. I had a similar problem with the canvas renderer (anything textured was invisible). For me I changed from using the ImageUtils.loadTexture to a texture and texture loader and it works.
var texture = new THREE.Texture();
var texLoader = new THREE.ImageLoader();
texLoader.addEventListener( 'load', function(event){
texture.image = event.content;
texture.needsUpdate = true;
} );
texLoader.load('texture.png');
I do however still have problems with a canvas renderer in safari but you appear to only be using the webgl renderer. Hope this helps.