Erobo Software | Scripts: Javascript | Creating a 3D Mesh in CanvasX / Three.js and Export to Web JSON Object Model

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

Developer's Section

Creating a 3D Mesh in CanvasX / 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: (3219)
Favorites:

In this tutorial we will be looking at creating a mesh in CanvasX or Three.js versions 78 or less. 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 CanvasX or Three.js < r78.00 is understanding how to use the Object Model Format ( See CanvasX 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 CanvasX / Three.js using the 3D Vector Drawer application (See 3D Vector Drawer for Purchase 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

<script src="35/scripts/CanvasX.min.js"></script>
  
  <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. (Download Box Below). Have fun!.

Downloads
CanvasX.min.js	108.1 KB
bird_textured.json	351.5 KB
bird_textured_wireframe.json	359.1 KB
texture_bird.png	28.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: