0

I am trying to apply a texture to a simple 3-d cube model exported from Blender 2.78b (as a matter of fact, the default blender cube). I exported the model in the standard three.js JSON format. I realize that I should be able to apply a texture in Blender on top of the geometry, but I want to "style" the blender model in three.js at runtime. Thus I am only interested in using blender to provide the geometry for my mesh.

I have created a plunker illustrating the situation.

I load in a blender model as blenderGeom, and then apply a MeshBasicMaterial with map set to a brick texture (unfortunately, I have to load the texture as Base64, since plunker doesn't allow you to upload images). I then apply the exact same material/texture to a native three.js BoxGeometry nonBlenderCubeGeom:

  function loadModel() {
    console.log('now in loadModel');
    var promise = new Promise( (resolve, reject) => {
      var loader = new THREE.JSONLoader();

      // load a resource

  loader.load(
    'cube.json', (blenderGeom, materials) => {
      console.log(`loadModel: now loading cube: geomery=${geometry}`);
      let cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xff8080,
        wireframe: false,
        map: brickTexture
      })

      nonBlenderCubeGeom = new THREE.BoxGeometry(50, 50, 50);
      blenderCubeGeom = blenderGeom;
      blenderCube = new THREE.Mesh(blenderGeom, cubeMaterial); //no work
      blenderCube.position.x = -20;
      nonBlenderCube = new THREE.Mesh(nonBlenderCubeGeom, cubeMaterial); //work
      nonBlenderCube.position.x = 20;

      blenderCube.scale.set(10, 10, 10);

      scene.add(blenderCube);
      scene.add(nonBlenderCube);

As you can see from running the plunker, only the native three.js object on the right is textured, and the blender model on the left is not:

enter image description here

Am I doing something wrong? Is it simply a restriction that you can only texture a model in Blender?

Three.js r84. Blender 2.78b. I'm assuming this on three.js side, but I'm opening it up to blender as well.

Many Thanks.

vt5491
  • 2,254
  • 2
  • 22
  • 34
  • 1
    looks like there's something wrong with UVs on the exported model – prisoner849 Feb 18 '17 at 13:00
  • Yes, this is key. Thanks for pointing this out. I manually set the uvs of the loaded model with one from a BoxGeometry, geometry.faceVertexUvs[0] = boxGeometry.faceVertexUvs[0], and now I can apply a texture. Not a solution, but a big hint. Obj format export has problem too. Investigating further, and will post any results I find. – vt5491 Feb 21 '17 at 07:02
  • see http://stackoverflow.com/questions/24866748/exporting-a-simple-model-with-texture-from-blender-to-three-js. Just had to uv unwrap the object with "u", and now I see uvs in my .json: "uvs":[[0,0,1,0,1,1,0,1]], and I can apply a texture. Problem solved. – vt5491 Feb 21 '17 at 07:36

0 Answers0