I've been able to add images as textures on ViewPort2DVisual3D by simply setting the 'Value' field with an Image.
But now I'm trying to use the helix tools and I can't find a way to do the same on a MeshElement3D.
I've been trying with a RectangleVisual3D, but there's nothing such as a 'Visual' field on it.
I bet I should try with the 'Material' field, but all I found is the ImageMaterialExtension object.
But it is not inheriting from Material so I can't give it to my RectangleVisual3D.
Any advice?
I found the solution, we can just use the Material Helper such as :
var mat = MaterialHelper.CreateImageMaterial("img.png", 1, UriKind.Absolute);
and add it to the Material of the MeshElement3D
Related
I'm searching to add an IBL to my scene and objects. But I can't find anything on the web. There are some examples with an envMap, but the problem is that with the envMap the object looks like chrome...
I'm trying to have such an effect:
I found that you can use IBL (Image Based Lighting), PRT (Precomputed Radiance Transfer) or PBR (Physically Based Rendering). But I'm unable to know how to use such an effect with three.js.
[EDIT]
After using the new MeshStandardMaterial from the r74dev I'm able to have the following result:
(before)
(after)
But I can't use MeshStandardMaterial and envMap with textures. Either the texture or the MeshStandardMaterial dooesn't work.
Thanks to WestLangley I'm using MeshStandardMaterial:
var objectGeometry = new THREE.SphereGeometry( 10, 100, 100 );
material = new THREE.MeshStandardMaterial({envMap : textureSkydome});
(r74dev)
Maybe you can use lightmaps. You can use them with THREE.MeshPhongMterial by setting material.lightmap = someLightmapTexture. Important - you need a second set of UVs in your geometry in order to use lightmaps.
have a look at this example.
I'm testing a custom scene in ThreeJS.org/editor. I've started with the Camera example scene as a template. I want to add custom geometry to it. When I import my OBJ file, the mesh appears in the editor with no problem, but there doesn't seem to be a way to import its material along with it. Instead, I went and manually assigned the correct texture map to the imported object's Material component.
In the editor, the texture map showed up and looked great after I added it manually, but when I pressed Play (or when I Exported or Published the scene) the texture map for that object was gone again. I tried refreshing my window, and all changes I made to the material component were lost.
There must be something simple I've overlooked. Can anyone help?
The OBJ format doesn't store material data; it uses a separate format, MTL, for that. Unfortunately, it seems that the Three.JS editor doesn't currently support MTL files.
I was reading on ThreeJS custom attributes and got confused about how to set them up.
So i've seen that we add an attribute to the geometry attribute list and then the same to the ShaderMaterial attributes list ?
My question is how to add custom attributes in 3js ?
The new version (r67) features RawShaderMaterial which allows full control of attributes/shaders. Here's an example:
http://threejs.org/examples/webgl_buffergeometry_rawshader.html
If you want something less "raw" but still performant, here's an example using BufferGeometry and ShaderMaterial:
http://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles.html
And, if you want to use Geometry here's an example of that too:
http://threejs.org/examples/webgl_custom_attributes.html
We are studying on product designer project. Designer is ready.
I want to do 3d preview result with three.js.
How can we texture one side of phone case? or can we border texture mapping?
OBJLoader version:
http://www.shopilife.com/baskiburada/viewer/viewer_4.html
And some obj files cannot be textured. Error is "GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2"
http://www.shopilife.com/baskiburada/viewer/viewer2.html
First, regarding re-texturing the back vs. front of the phone case. The approach here is to seperate the UV coordinates on the model itself. This way you have two sets of materials/textures/UVs. Then during runtime you load them both using a MeshFaceMaterial to load the two materials in an array like so:
materialArray.push(THREE.BasicMeshMaterial({color: 0xff0000})); //use whatever Material type you'd like of course
materialArray.push(THREE.BasicMeshMaterial({color: 0x0000ff}));
var multipleMaterial = new THREE.MeshFaceMaterial(materialArray);
phoneCaseMesh= new THREE.Mesh( geometry, multipleMaterial );
Then when you want to switch one out you would grab the mesh and change the mapping to the desired side something like:
phoneCaseMesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'newtexture.jpg' );
Second, regarding the Error on you second sample, WestLangley is correct the OBJ file has no UV coordinates to map to, so the index is out of bounds when you apply a texture. If you look at both OBJ files your iphone4.obj has vt entities while the untitled.obj is just v and f. Hope that helps
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