Can't import 3D Object into ThreeJS

Question

I am having issues loading a 3D object into Three.JS on my site. 3D images were made in blender, and then exported to .JSON format using MrDoobs exporter addon.

edit: This is the exporter I am using - https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

var loader = new THREE.JSONLoader();
loader.load('cube.json', function (loadedGeometry) {
var loadedMaterial = new THREE.MeshNormalMaterial({color: 0x55B663});
var loadedMesh = new THREE.Mesh(loadedGeometry, loadedMaterial);
loadedMesh.position.set(-0.8,1,9);
scene.add(loadedMesh);
});

This is my code, it works.

Now, if I just change 'cube.json' to 'tree.json' I get weird errors.

In chrome I see:

"three.min.js:387 Uncaught TypeError: Cannot read property 'length' of undefined"

In firefox firebug I see:

TypeError: p is undefined
...;d<D;d++)c.faceVertexUvs[d]=[]}k=0;for(l=p.length;k<l;)d=new THREE.Vector3,d.x=p...
three.min.js (line 387, col 221)

cube.JSON:

 { "normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349], "name": "CubeGeometry", "metadata": { "normals": 8, "type": "Geometry", "version": 3, "vertices": 8, "uvs": 0, "faces": 6, "generator": "io_three" }, "vertices": [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1], "uvs": [], "faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,2,6,7,3,2,6,5,3,33,4,0,3,7,4,0,3,5] } 

Cube in blender (basic cube that loads when you start blender)

tree.JSON:

 { "b4w_format_version": "5.07", "b4w_filepath_blend": "birch.blend", "actions": [], "images": [], "textures": [], "materials": [], "meshes": [{"name": "Mesh", "uuid": "eed656b0bf405ca47f45b6961eb940b6", "materials": [], "b4w_vertex_anim": [], "vertex_groups": [], "uv_textures": [], "active_vcol_name": null, "submeshes": [{"base_length": 27160, "indices": [0, 123024], "normal": [0, 81480], "tangent": [0, 0], "color": [0, 0], "group": [0, 0], "position": [0, 81480], "texcoord": [0, 0], "texcoord2": [0, 0], "vertex_colors": []}], "b4w_bounding_box": {"max_x": 2.05757, "max_y": 9.4122, "max_z": 2.4881, "min_x": -2.04331, "min_y": -0.0061, "min_z": -1.82739}, "b4w_bounding_sphere_radius": 4.71893, "b4w_bounding_cylinder_radius": 2.33796, "b4w_bounding_sphere_center": [0.0069, 4.70429, 0.3298], "b4w_bounding_cylinder_center": [-0.13644, 4.70305, 0.38116], "b4w_bounding_ellipsoid_axes": [2.44696, 5.61982, 2.57501], "b4w_bounding_ellipsoid_center": [-0.13099, 4.94487, 0.28616], "b4w_bounding_box_source": {"max_x": 2.05757, "max_y": 9.4122, "max_z": 2.4881, "min_x": -2.04331, "min_y": -0.0061, "min_z": -1.82739}, "b4w_shape_keys": []}], "armatures": [], "cameras": [{"name": "FALLBACK_CAMERA", "uuid": "be99e8d497cf76672cb518559065a1d6", "type": "PERSP", "angle": 0.857556, "angle_y": 0.50338, "ortho_scale": 6, "clip_start": 0.1, "clip_end": 100, "dof_distance": 0, "b4w_dof_front": 1, "b4w_dof_rear": 1, "b4w_dof_power": 3, "b4w_move_style": "TARGET", "b4w_hover_zero_level": 0.0, "b4w_trans_velocity": 1, "b4w_rot_velocity": 1, "b4w_zoom_velocity": 0.1, "b4w_use_target_distance_limits": false, "b4w_distance_min": 1, "b4w_distance_max": 10, "b4w_use_horizontal_clamping": false, "b4w_rotation_left_limit": -0.7853981852531433, "b4w_rotation_right_limit": 0.7853981852531433, "b4w_horizontal_clamping_type": "LOCAL", "b4w_use_vertical_clamping": false, "b4w_rotation_down_limit": -0.7853981852531433, "b4w_rotation_up_limit": 0.7853981852531433, "b4w_vertical_clamping_type": "LOCAL", "b4w_horizontal_translation_min": -10, "b4w_horizontal_translation_max": 10, "b4w_vertical_translation_min": -10, "b4w_vertical_translation_max": 10, "b4w_use_zooming": false, "b4w_hover_angle_min": 0.0, "b4w_hover_angle_max": 1.5707963705062866, "b4w_enable_hover_hor_rotation": true, "b4w_use_panning": true, "b4w_use_pivot_limits": false, "b4w_pivot_z_min": 0.0, "b4w_pivot_z_max": 10.0, "b4w_target": [0, 0, 0], "dof_object": null}], "curves": [], "lamps": [], "sounds": [], "speakers": [], "particles": [], "objects": [{"name": "tree", "uuid": "2e14fac91adabc207e5e8eb9142f68e5", "type": "MESH", "body_text": null, "data": {"uuid": "eed656b0bf405ca47f45b6961eb940b6"}, "proxy": null, "dupli_group": null, "parent": null, "b4w_viewport_alignment": null, "pinverse_tsr": null, "parent_type": "OBJECT", "parent_bone": "", "modifiers": [], "constraints": [], "particle_systems": [], "animation_data": null, "b4w_do_not_batch": false, "b4w_dynamic_geometry": false, "b4w_do_not_cull": false, "b4w_disable_fogging": false, "b4w_do_not_render": false, "b4w_shadow_cast": false, "b4w_shadow_receive": false, "b4w_reflexible": false, "b4w_reflexible_only": false, "b4w_reflective": false, "b4w_reflection_type": "PLANE", "b4w_caustics": false, "b4w_wind_bending": false, "b4w_wind_bending_angle": 10, "b4w_wind_bending_freq": 0.25, "b4w_detail_bending_amp": 0.1, "b4w_detail_bending_freq": 1, "b4w_branch_bending_amp": 0.3, "b4w_main_bend_stiffness_col": "", "b4w_detail_bend_colors": {"leaves_stiffness_col": "", "leaves_phase_col": "", "overall_stiffness_col": ""}, "b4w_lod_transition": 0.01, "lod_levels": [], "b4w_proxy_inherit_anim": true, "b4w_selectable": false, "b4w_outlining": false, "b4w_billboard": false, "b4w_pres_glob_orientation": false, "b4w_billboard_geometry": "SPHERICAL", "b4w_outline_settings": {"outline_duration": 1, "outline_period": 1, "outline_relapses": 0}, "b4w_outline_on_select": false, "b4w_use_default_animation": false, "b4w_anim_behavior": "CYCLIC", "b4w_animation_mixing": false, "b4w_shadow_cast_only": false, "b4w_collision": false, "b4w_collision_id": "", "b4w_vehicle": false, "b4w_vehicle_settings": null, "b4w_character": false, "b4w_character_settings": null, "b4w_floating": false, "b4w_floating_settings": null, "pose": null, "field": null, "b4w_correct_bounding_offset": "AUTO", "game": {"physics_type": "STATIC", "use_ghost": false, "use_sleep": false, "mass": 1, "velocity_min": 0, "velocity_max": 0, "damping": 0.04, "rotation_damping": 0.1, "lock_location_x": false, "lock_location_y": false, "lock_location_z": false, "lock_rotation_x": false, "lock_rotation_y": false, "lock_rotation_z": false, "collision_margin": 0.03999999910593033, "collision_group": 1, "collision_mask": 65535, "use_collision_bounds": false, "collision_bounds_type": "BOX", "use_collision_compound": false}, "location": [0.51673, 0.43562, -0.52289], "rotation_quaternion": [1, 0, 0, 0], "scale": [1, 1, 1], "b4w_object_tags": null, "b4w_anchor": null}, {"name": "FALLBACK_CAMERA", "uuid": "27d39f21ec7367a1f940a7da86fdbd4d", "type": "CAMERA", "body_text": null, "data": {"uuid": "be99e8d497cf76672cb518559065a1d6"}, "proxy": null, "dupli_group": null, "parent": null, "b4w_viewport_alignment": null, "pinverse_tsr": null, "parent_type": "OBJECT", "parent_bone": "", "modifiers": [], "constraints": [], "particle_systems": [], "animation_data": null, "b4w_do_not_batch": false, "b4w_dynamic_geometry": false, "b4w_do_not_cull": false, "b4w_disable_fogging": false, "b4w_do_not_render": false, "b4w_shadow_cast": false, "b4w_shadow_receive": false, "b4w_reflexible": false, "b4w_reflexible_only": false, "b4w_reflective": false, "b4w_reflection_type": "PLANE", "b4w_caustics": false, "b4w_wind_bending": false, "b4w_wind_bending_angle": 10, "b4w_wind_bending_freq": 0.25, "b4w_detail_bending_amp": 0.1, "b4w_detail_bending_freq": 1, "b4w_branch_bending_amp": 0.3, "b4w_main_bend_stiffness_col": "", "b4w_detail_bend_colors": {"leaves_stiffness_col": "", "leaves_phase_col": "", "overall_stiffness_col": ""}, "b4w_lod_transition": 0.01, "lod_levels": [], "b4w_proxy_inherit_anim": true, "b4w_selectable": false, "b4w_outlining": false, "b4w_billboard": false, "b4w_pres_glob_orientation": false, "b4w_billboard_geometry": "SPHERICAL", "b4w_outline_settings": {"outline_duration": 1, "outline_period": 1, "outline_relapses": 0}, "b4w_outline_on_select": false, "b4w_use_default_animation": false, "b4w_anim_behavior": "CYCLIC", "b4w_animation_mixing": false, "b4w_shadow_cast_only": false, "b4w_collision": false, "b4w_collision_id": "", "b4w_vehicle": false, "b4w_vehicle_settings": null, "b4w_character": false, "b4w_character_settings": null, "b4w_floating": false, "b4w_floating_settings": null, "pose": null, "field": null, "b4w_correct_bounding_offset": "AUTO", "game": {"physics_type": "STATIC", "use_ghost": false, "use_sleep": false, "mass": 1, "velocity_min": 0, "velocity_max": 0, "damping": 0.04, "rotation_damping": 0.1, "lock_location_x": false, "lock_location_y": false, "lock_location_z": false, "lock_rotation_x": false, "lock_rotation_y": false, "lock_rotation_z": false, "collision_margin": 0.03999999910593033, "collision_group": 1, "collision_mask": 65535, "use_collision_bounds": false, "collision_bounds_type": "BOX", "use_collision_compound": false}, "location": [8.10816, 6.24808, 4.05087], "rotation_quaternion": [0.68822, 0.51096, 0.40978, -0.31201], "scale": [1, 1, 1], "b4w_object_tags": null, "b4w_anchor": null}], "groups": [], "scenes": [{"name": "Scene", "uuid": "dc3599ee4ccefc15615092b4aeefc1fc", "b4w_use_nla": false, "b4w_nla_cyclic": false, "b4w_logic_nodes": [], "b4w_use_logic_editor": false, "b4w_enable_audio": true, "b4w_enable_dynamic_compressor": false, "b4w_dynamic_compressor_settings": {"threshold": -24, "knee": 30, "ratio": 12, "attack": 0.003, "release": 0.25}, "b4w_shadow_settings": {"csm_resolution": 2048, "self_shadow_polygon_offset": 1, "self_shadow_normal_offset": 0.01, "b4w_enable_csm": false, "csm_num": 1, "csm_first_cascade_border": 10, "first_cascade_blur_radius": 3, "csm_last_cascade_border": 100, "last_cascade_blur_radius": 1.5, "fade_last_cascade": true, "blend_between_cascades": true}, "b4w_god_rays_settings": {"intensity": 0.7, "max_ray_length": 1, "steps_per_pass": 10}, "b4w_ssao_settings": {"radius_increase": 3, "hemisphere": false, "blur_depth": false, "blur_discard_value": 1, "influence": 0.7, "dist_factor": 0, "samples": 16}, "b4w_color_correction_settings": {"brightness": 0, "contrast": 0, "exposure": 1, "saturation": 1}, "b4w_bloom_settings": {"key": 1, "blur": 4, "edge_lum": 1}, "b4w_motion_blur_settings": {"motion_blur_factor": 0.01, "motion_blur_decay_threshold": 0.01}, "b4w_glow_settings": {"render_glow_over_blend": false, "small_glow_mask_coeff": 2, "large_glow_mask_coeff": 2, "small_glow_mask_width": 2, "large_glow_mask_width": 6}, "b4w_outline_color": [1, 1, 1], "b4w_outline_factor": 1, "b4w_enable_physics": true, "b4w_render_shadows": "AUTO", "b4w_render_reflections": "ON", "b4w_reflection_quality": "MEDIUM", "b4w_render_refractions": "AUTO", "b4w_render_dynamic_grass": "AUTO", "b4w_enable_god_rays": false, "b4w_enable_glow_materials": "AUTO", "b4w_enable_ssao": false, "b4w_batch_grid_size": 0, "b4w_anisotropic_filtering": "OFF", "b4w_enable_bloom": false, "b4w_enable_motion_blur": false, "b4w_enable_color_correction": false, "b4w_antialiasing_quality": "MEDIUM", "b4w_enable_object_selection": "AUTO", "b4w_enable_outlining": "AUTO", "b4w_enable_anchors_visibility": "AUTO", "b4w_tags": null, "objects": [{"uuid": "2e14fac91adabc207e5e8eb9142f68e5"}, {"uuid": "27d39f21ec7367a1f940a7da86fdbd4d"}], "camera": {"uuid": "27d39f21ec7367a1f940a7da86fdbd4d"}, "world": {"uuid": "b04390832de5315e7ad9b418b5ba6a8c"}, "frame_start": 1, "frame_end": 250, "timeline_markers": null, "fps": 24, "audio_volume": 1, "audio_doppler_speed": 343.3, "audio_doppler_factor": 1}], "worlds": [{"name": "World", "uuid": "b04390832de5315e7ad9b418b5ba6a8c", "texture_slots": [], "horizon_color": [0.0509, 0.0509, 0.0509], "zenith_color": [0.01, 0.01, 0.01], "use_sky_paper": false, "use_sky_blend": false, "use_sky_real": false, "b4w_use_default_animation": false, "b4w_anim_behavior": "CYCLIC", "light_settings": {"use_environment_light": false, "environment_energy": 1, "environment_color": "PLAIN"}, "b4w_sky_settings": {"render_sky": false, "reflexible": false, "reflexible_only": false, "procedural_skydome": false, "use_as_environment_lighting": false, "color": [0.087, 0.255, 0.6], "rayleigh_brightness": 3.3, "mie_brightness": 0.1, "spot_brightness": 20, "scatter_strength": 0.2, "rayleigh_strength": 0.2, "mie_strength": 0.006, "rayleigh_collection_power": 0.35, "mie_collection_power": 0.5, "mie_distribution": 0.4}, "fog_settings": {"use_fog": false, "intensity": 0, "depth": 25, "start": 5, "height": 0, "falloff": "QUADRATIC", "use_custom_color": true, "color": [0.5, 0.5, 0.5]}, "animation_data": null}], "node_groups": [], "binaries": [{"binfile": "tree.bin", "int": 0, "float": 492096, "short": 818016, "ushort": 980976}], "b4w_export_warnings": [{"text": "Missing active camera or wrong active camera object", "type": "PRIMARY"}], "b4w_export_errors": []} 

tree in blender:

tree.blend file - mega.nz/#!U9UTxYYZ!-0X13Ur2E2d96BTbOVhhEBb1AiaV8g6r988XoTTV6XY

Any ideas? Thanks!

Answer 1

Are you sure you've exported them in the same way?

In your tree.json file there's no data about vertices, faces and normals. Maybe you're not exporting it correctly.

If you compare the two json files you'll see that in the cube you have 3 arrays (normals, faces, vertices). They contain the essential data for three.js to build Geometry. These arrays are missing in the tree.json

Update 1: After doing some tests with the model you provided I found the problem.

Three.js exporter requires the object to be a Mesh. The model you provided is seen by Blender as a curve.

In order to properly export it do the following:

• Select the object
• Object -> Convert To -> Mesh from Curve/Meta/Surf/Text
• Export to Three.js