Search code examples
javascriptthree.jstexturesblender

Blender to Three.js (.JSON) and OBJ to .JS texture mapping issues

I'm stumped. I've looked at all related threads I could find, none quite describe my issue.

I'm trying to get either a .JSON or .JS version of a model to export and texture map the same as an .OBJ version when rendered via WebGL. Below is an image illustrative of what's happening:

WebGL rendered MODEL EXAMPLES

Setup: Win7, Blender 2.77, Three.js (downloaded 5/22/16), Three.js (.json) Blender Exporter, Python OBJ > .JS converter script (convert_obj_three.py)

python convert_obj_three.py -i xxx.obj -o xxx.js

Steps:

  • WoW model exported from WoW ModelViewer as .OBJ
  • WoW model imported to Blender
  • Blender Edit mode to "Remove Doubles"
  • Blender Export to .OBJ
  • Three.js THREE.OBJLoader() script to test on Web

Results in "GOOD" example (left case in image)

  • Blender Export to .JSON (trying every config imaginable and then some)
  • Three.js THREE.JSONLoader() script to test on Web

Results in "BAD" example (middle case in image)

  • Blender Export to .OBJ
  • CMD line Python script to do conversion from OBJ to .JS
  • Three.js THREE.JSONLoader() script to test on Web

Results in "WORSE" example (middle case in image). For some reason in this last instance not just the Hair texture, but portions of skin of the model's face get wonky as well.

You'll likely notice the light rendering varies a bit in each case as well.

I look at the .JSON and .JS files and have no idea how to manually edit if that's ultimately what's needed.

Perhaps certain models simply won't texture properly?

Solution

  • Your UV's for the head of your model are outside the range [ 0, 1 ].

    When you load your JSON model, set

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

    three.js r.77