I am facing a problem when trying to change the material of an obj model to wireframe, this causes the scene to stop all its controls and logs this error message : "o.position is undefined"as a three.js error, below is an example of what I am trying to do:
<a-obj-model src="#model-obj" material="wireframe:true" >
Your code looks correct. The error could potentially be because of a missing geometry attribute.
Here's a working example:
https://glitch.com/edit/#!/a-frame-obj-wireframe
Adding a basic geometry makes the error go away:
<a-obj-model src="#obj"
position="0 1 -2"
scale=".5 .5 .5"
material="wireframe: true;"
geometry="primitive: box;">
</a-obj-model>
You question is very vague and would be a lot more useful to see the code in which you create the object and set it's material. The following code below is how you would set an object's material to wireframe. Hopefully this helps you, if not please add your code to your question as I mentioned.
Code to set material to wireframe:
material = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
Read more about this here
Related
I'm trying to render shadows using the latest version of three.js (r102), and I'm not sure what I am doing wrong. I am using MeshPhongMaterial with castShadow and receiveShadow set on all relevant meshes, and a directional light facing towards the scene content. Could someone take a look at this and help me figure out how to get these shadows working? Thanks!
Live demo (toggle shadows in the menu):
https://argonjs.github.io/three-web-layer/
Source:
https://github.com/argonjs/three-web-layer
If you add a small cube in front of your WebLayer3D, it correctly casts shadows on rendered DOM layers:
//in app.ts just after light with shadow camera:
let geometryBox = new THREE.BoxBufferGeometry( 0.01, 0.01, 0.01 )
let materialRed = new THREE.MeshPhongMaterial( {color: 0xff0000} )
let cubeSmall = new THREE.Mesh( geometryBox, materialRed )
cubeSmall.position.set( 0.1, -0.03, 0.1 )
cubeSmall.castShadow = true
cubeSmall.receiveShadow = true
scene.add( cubeSmall )
So, only the planes produced by the WebLayer3D do not cast shadows, the setup for the scene / camera / light is correct.
Update: the explanation below is not the reason, see the solution with material.shadowSide in another answer.
If you look at the tree of objects in three.js realm (i.e. traversing through children[]), starting with todoLayer - a lot of them will have castShadow at "false". You will have to re-think your strategy here. Also note, castShadow=false on parent Object3D turns it off for the children.
I figured it out after the hint from Alex (thanks Alex!).
Basically, as strange as it seems, a plane in three.js will not cast shadows unless it is double-sided (Update: Or unless material.shadowSide is set to THREE.FrontSide). Once I set THREE.DoubleSide on the plane material, it worked as expected. Basically, for a textured plane to cast shadows, the following is needed (as of three.js r102):
var mesh = new THREE.Mesh(
new THREE.PlaneGeometry(1,1,2,2),
new THREE.MeshPhongMaterial({
map: texture,
side: THREE.DoubleSide, // important!
alphaTest: 0.1,
})
mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
map: texture
depthPacking: THREE.RGBADepthPacking,
alphaTest: 0.1
})
I also had to adjust the light's shadow bias in order to eliminate artifacts.
If I set the renderTarget mapping for my cube camera to THREE.CubeRefractionMapping, it renders upside down.
_myCubeCamera.renderTarget.mapping = THREE.CubeRefractionMapping;
It seems related to the issue discussed in this post where the default orientation of the CubeCamera's component cameras are upside down. I tried tinkering around with these orientations in the THREE.js source code but only made things worse.
So, is there a correct way to use CubeRefractionMapping with CubeCamera? or a workaround?
r73
I found a workaround: When assigning the envMap to the material, use THREE.BackSide.
var sphereMaterial = new THREE.MeshBasicMaterial(
{
envMap: myCubeCamera.renderTarget,
side: THREE.BackSide,
refractionRatio: .09
} );
A complete example is here.
Not sure why this works, but it does, and that's what the original poster (me!) wanted.
In my current project, I need a way to outline a mesh.This color outline will represent the object's current state, relevant for me.
The problem is that it is a custom mesh, loaded using JSONLoader.
I've tried different approaches, following (mainly) these 2 examples: https://stemkoski.github.io/Three.js/Outline.html and
THREEx.geometricglow. In both cases, I scale the mesh outline to a bit bigger than the original. My main problem is that scaling equally in all axis will not cover my object the way I intended to.
Here is the code I'm using:
var outlineMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide, transparent: true, opacity:0.5 } );
var outlineMesh2 = new THREE.Mesh( object.geometry, outlineMaterial2 );
outlineMesh2.position.copy(object.position);
outlineMesh2.scale.copy(object.scale);
outlineMesh2.scale.multiplyScalar(1.1)
scene.add( outlineMesh2 );
`
With a simple cube mesh, the outline will be good.
But with my custom mesh, the scale will not fit the shape correctly.
Here is a image demonstrating: http://s13.postimg.org/syujtd75z/print1.png
Also, using Stemkoski approach, the outlining mesh will also show in front of the object, not just outline (as seen in the above picture).
My question is: How should I resize the mesh? For what I know, it might have something to do with face normals.
Thanks for your time.
Does someone know how to make the spotlight reflection here: http://web251.merkur.ibone.ch/webgl/three/ look like the one here: http://web251.merkur.ibone.ch/webgl ? i.e. that it gets reflected to the camera? It's weird that it doesn't do so automatically. If you move around the planet with the mouse you'll notice. In this scene everything is static but the camera, and with camera movement also the eye E gets moved around, right? So what I'd expect is the spotLight reflection on the planet is rerendered/recalculated all the time, e.g. with Blinn's Halfvector, leading to a reflection on the planet inbetween E and the spotlight.
Help is really appreciated, we've searched for hours but couldn't find a clue what was wrong with our code!
Thanks in advance
Doidel
The first bit of starting code I used for playing with this was:
http://mrdoob.github.com/three.js/examples/webgl_materials_shaders.html
The key is adding a specularity map with the specularMap property for the (Phong) Material.
Such can be done as follows:
var MySpecularMap = THREE.ImageUtils.loadTexture( "MySpecularImage.jpg" );
var Color = THREE.ImageUtils.loadTexture( "MyColorImage.jpg" );
var mappedTexture = new THREE.MeshPhongMaterial( { color: 0xffffff, map: Color, specular: 0xffffff, specularMap: MymapSpecular} );
sphere = new THREE.SphereGeometry( 600, 32, 32 );
globe = new THREE.Mesh( sphere, mappedTexture );
scene.add( globe );
Also, for this type of demo OrbitControls seem to be the best.
Here's a finished example with {ColorMap, SpecularMap, BumpMap, Clouds, SkyDome}:
http://randompast.github.io/randomtests/three.js/earth/1/index.html
Since I use revision 54 instead of revision 48 I get this excetption in my script:
Uncaught TypeError: Cannot read property 'map' of undefined three.js:18155
bufferGuessUVType three.js:18155
initMeshBuffers three.js:17963
addObject three.js:21674
initWebGLObjects three.js:21608
render three.js:21145
...
THREE.JSONLoader.createModel three.js:9892
xhr.onreadystatechange
I am merging geometries with THREE.GeometryUtils.merge. Afterwards I use the merged geometry to construct a mesh. For this mesh I use MeshFaceMaterial to apply the materials of the faces. Since r54 this ends up in an exception. If I use some other material it works.. but then I can not use the materials of the original faces.
Update: All faces are pointing to a material geometry.faces[i].materialIndex but geometries do not contain a material array any more.
Update:
I just want to merge geometries and keep their materials :) I thought this would be the solution but the materialIndex of a face will not be update on merge. I post this example to somehow explain what I need.
mesh1 = new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.MeshBasicMaterial({ color: 0xFF0000}));
mesh2 = new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.MeshBasicMaterial({ color: 0x0000FF}));
mesh2.position.y = 3;
THREE.GeometryUtils.merge(mergedGeo, mesh1);
THREE.GeometryUtils.merge(mergedGeo, mesh2);
scene.add(new THREE.Mesh(mergedGeo, new THREE.MeshFaceMaterial([mesh1.material, mesh2.material])));
I could implement an own logic to link the merged faces to the right material but this is a bit frustrating since it worked in earlier versions.
As detailed in the migration page since r52 it's now like this:
new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materialsArray ) );
EDIT: Before merging, you need to set the material index for each geometry
THREE.GeometryUtils.setMaterialIndex( mesh1.geometry, 0 );
THREE.GeometryUtils.setMaterialIndex( mesh2.geometry, 1 );