Products
Services
Contact Us

Scripts: Javascript :: HTML5 :: Library Article #35

Developer's Section

Creating a 3D Mesh in Three.js and Export to Web JSON Object Model
By: Erobo Software

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (842)
Favorites:

In this tutorial we will be looking at creating a mesh in Three.js versions 70.0 or greater. Then we will show you how to utilize the Object Model JSON Loader to load them to the Browser

One of the key factors to properly create and load a mesh (complex) object in Three.js ≥ r70.00 is understanding how to use the Object Model Format ( See Three.js Wiki for reference). This explains how to format any JSON file to properly load everything you need to get started. In the following example we show you 2 meshes created with a texture (texture_bird.png) and exported to Three.js using the 3D Vector Drawer application (See 3D Vector Drawer for Info). In this case we just plotted the vector points in the app and hit the Export To Object Model Function which generates the JSON file automatically [bird_textured.json or bird_textured_wireframe.json].

Example 1 (Skinned Mesh)



Example 2 (Wireframe)


See the source code for (Skinned Mesh) below:

 Code Snippet 1

  <!--Load Libraries in this case using Minified version-->
  <script src="35/scripts/three.min..js"></script>
  <!--Load using Canvas Renderer Found At (examples/js/renderers)-->
  <script src="35/scripts/Projector.js"></script>
  <script src="35/scripts/CanvasRenderer.js"></script>
  <!--Declare Container-->
  <center>
    <div id="mycontainer"></div>
  </center>

  <script>
    //Javascript declaration
    var scene = null;
    var renderer = null;
    var camera = null;

    //load object 1 (Skinned Mesh)
    function modelLoadedCallback(object) {
      scene.add(object);
      object.position.z += 292;
      object.position.x = -3;
      object.position.y -= 0.8;
      object.rotation.y -= 0.92;
      renderer.render(scene, camera);
    }

    function start3dWorld() {

      var container = document.getElementById('mycontainer');

      var texture2 = new THREE.Texture(container);

      // set the scene size
      var WIDTH = 464,
      HEIGHT = 380;

      // set some camera attributes
      var VIEW_ANGLE = 45,
      ASPECT = WIDTH / HEIGHT,
      NEAR = 0.1,
      FAR = 7000;

      // create a canvas renderer, camera
      // and a scene
      camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR);
      scene = new THREE.Scene();

      // the camera starts at 0,0,0 so pull it back
      camera.position.z = 300;
      camera.position.y = 0;
      camera.position.x = 0;

      //add camera
      scene.add(camera);

      //Create object model and load 
      //JSON Model bird.json created using 3D Vector Drawer Application (Export Functionality)
      var loader = new THREE.ObjectLoader();
      loader.load("35/scripts/bird_textured.json", modelLoadedCallback);

      //create renderer
      renderer = new THREE.CanvasRenderer();

      // start the renderer
      renderer.setSize(WIDTH, HEIGHT);

      // attach the render-supplied DOM element
      container.appendChild(renderer.domElement);

      renderer.setClearColor(0xffffff, 1);

      renderer.render(scene, camera);

    }

    start3dWorld();

  </script>


See the source code for (Wireframe) below:

 Code Snippet 2

<center>
    <div id="mycontainer2"></div>
  </center>

  <script>

    var scene2 = null;
    var renderer2 = null;
    var camera2 = null;

    //load object 2 (Wireframe)
    function modelLoadedCallback2(object) {
      scene2.add(object);
      object.position.z += 292;
      object.position.x = -3;
      object.position.y -= 0.8;
      object.rotation.y -= 1.0;
      renderer2.render(scene2, camera2);
    }

    function start3dWorld2() {

      var container2 = document.getElementById('mycontainer2');

      var texture2 = new THREE.Texture(container2);

      // set the scene size
      var WIDTH = 464,
      HEIGHT = 380;

      // set some camera attributes
      var VIEW_ANGLE = 45,
      ASPECT = WIDTH / HEIGHT,
      NEAR = 0.1,
      FAR = 7000;

      // create a canvas renderer, camera
      // and a scene
      camera2 = new THREE.PerspectiveCamera(VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR);
      scene2 = new THREE.Scene();

      // the camera starts at 0,0,0 so pull it back
      camera2.position.z = 300;
      camera2.position.y = 0;
      camera2.position.x = 0;

      //add camera
      scene.add(camera2);

      //Create object model
      //Load bird_wireframe.json created using 3D Vector Drawer with Wireframe Mode turned On (Export Function)
      var loader = new THREE.ObjectLoader();
      loader.load("35/scripts/bird_textured_wireframe.json", modelLoadedCallback2);

      //create renderer
      renderer2 = new THREE.CanvasRenderer();

      // start the renderer
      renderer2.setSize(WIDTH, HEIGHT);

      // attach the render-supplied DOM element
      container2.appendChild(renderer2.domElement);

      renderer2.setClearColor(0xffffff, 1);

      renderer2.render(scene, camera);

    }

    start3dWorld2();

  </script>


Finally, you can download all the files you need to load into your local machine and / or the complete 160 M Master Three.js r71.0 .zip file for a full version in case you need it for further development. (Download Box Below). Have fun!.

Downloads
three.min.js498.9 KB
CanvasRenderer.js24.6 KB
Projector.js20.5 KB
bird_textured.json351.5 KB
bird_textured_wireframe.json359.1 KB
three.js-master_r71.0.zip20480 KB
texture_bird.png28.9 KB
 

See other Scripts in HTML5

 

Submit Your Scripts:

If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]