Hello,
I load an .obj representing a plane ( .obj created from sketchUp). I try to apply a texture video on it but it works only on half on the plane ( forming a triangle ). The problem may come from the fact that my obj is a 3Dobject. But I don’t see what I’m doing wrong.
ps: I’m beginner in three.js
Here the involve code:
video = document.createElement( 'video' );
texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var objLoader = new THREE.OBJLoader();
objLoader.setPath( 'assets/' );
objLoader.load( 'model3D.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
var quad_uvs =
[
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
];
var quad_indices =
[
0, 2, 1, 0, 3, 2
];
child.geometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( quad_uvs), 2 ) );
child.geometry.setIndex( new THREE.BufferAttribute( new Float32Array( quad_indices), 1 ) );
child.material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true, side:THREE.DoubleSide } );
}
})
scene.add( object );
}, onProgress, onError);
He a representation of the problem. On the left the texture apply on a simple plane, on the middle a texture apply on a bufferGeometry and on the right the texture apply on my obj. If someone has an idea.
Can you please share the OBJ in this thread?
BTW: What do you see on the console when doing this?
console.log( child.geometry.attributes.position );
Of course,
the .obj :
# Alias OBJ Model File
# Exported from SketchUp, (c) 2000-2012 Trimble Navigation Limited
# File units = meters
mtllib model3D.mtl
g Mesh1 Model
usemtl FrontColor
v 20.6309 592.833 -0
vt -812.242 23339.9
vn 0 0 -1
v 749.161 12.3429 -0
vt -29494.5 485.939
v 20.6309 12.3429 -0
vt -812.242 485.939
f 1/1/1 2/2/1 3/3/1
v 749.161 592.833 -0
vt -29494.5 23339.9
f 2/2/1 1/1/1 4/4/1
usemtl BackColor
vn -0 -0 1
f 3/3/2 2/2/2 1/1/2
f 4/4/2 1/1/2 2/2/2
g Mesh2 Model
l 3 1
l 2 3
l 4 2
l 1 4
ps: I don’t use the .mtl
each object inside the object.traverse:
child.geometry.position (of the Mesh):
I think the problem come from the points of my position but I don’t know how to deal with them to apply my textureVideo
I’ve inspected the geometry created form your OBJ. The geometry contains triangles for the front and back side which basically allows to apply different materials to the front and back. The problem is that you are adding uv and index data which do not match with your position and normal data.
I suggest you use one of the following approaches:
- Define your whole geometry data (position, normal, texture coordinates, etc.) in a content creation tool, import the geometry and then just use it. Try to avoid any sort of manual post-processing.
- Generate the entire geometry in your code. You can use
PlaneBufferGeoemtry for this or write a custom geometry generator. I would only recommend this approach if you have a good understanding of the engine’s geometry format.
1 Like
Thank you for the answer. In my case, I have to import an obj from sketchUp which has no texture set (like juste create a simple square with four point on sketchUp and exported the .obj) . So, I can’t define whole my geometry data, and I can’t create it directly with three.js 
Is there a simple way to apply a texture on each triangle that I get ?
Unfortunately no since you need valid texture coordinates first. I suggest you import the OBJ from sketchUp in Blender, ensure correct texture coordinates and then export to glTF which is the recommended 3D format of the project.
https://threejs.org/docs/index.html#manual/introduction/Loading-3D-models
I will try this, thank you.
Yup, I posted yesterday. I hoped someone on the stack community have already done the same think.
Edit: As you suggest, I did my .obj on blender and set correct texture coordinates. Now it’s seems to works. Thank you 
