Production Level Knowledge & Tips

  1. 未分類
  2. 19 view

[Javascript][Three.js][3D]Showing 3D Model of OBJ Format and Mouse Operation

Target

Showing OBJ format 3D Model and doing mouse operation.

Environment

  • OS
    • Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
  • three.js
    • r69

Develop

Prepare libraries

I’ll use CDN for main part of three.js library, but other libraries which are OBJ Loader and Mouse Operation.
Following commands is for downloading the libraries.
wget http://github.com/mrdoob/three.js/zipball/master
unzip master
cp mrdoob-three.js-ca14c79/examples/js/Detector.js .
cp mrdoob-three.js-ca14c79/examples/js/controls/TrackballControls.js .
cp mrdoob-three.js-ca14c79/examples/js/loaders/OBJLoader.js .

Source Code

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>3D model with three.js</title>
    <style>canvas { width: 100%; height: 100% }</style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>

    <script src="http://udam.asia/demo/model3d-threejs/TrackballControls.js"></script>
    <script src="http://udam.asia/demo/model3d-threejs/OBJLoader.js"></script>
    <script src="http://udam.asia/demo/model3d-threejs/Detector.js"></script>
    <script>
      var container;
      var camera, scene, renderer;
      var mouseX = 0, mouseY = 0;

      var windowHalfX = window.innerWidth  / 2;
      var windowHalfY = window.innerHeight / 2;

      init();
      animate();

      function init() {
        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, 640 / 480, 1, 2000);
        camera.position.z = 5;

        controls = new THREE.TrackballControls(camera);
        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 5;
        controls.panSpeed = 2;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;

        scene = new THREE.Scene();

        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);

        var manager = new THREE.LoadingManager();
        manager.onProgress = function (item, loaded, total) {
          console.log(item, loaded, total);
        };
        var texture = new THREE.Texture();
        var loader = new THREE.ImageLoader(manager);

        loader.load('http://udam.asia/demo/model3d-threejs/female_croupier_2013-03-26.png', function (image) {
          texture.image = image;
          texture.needsUpdate = true;
          texture.magFilter = THREE.NearestFilter;
          texture.minFilter = THREE.NearestMipMapLinearFilter;
        });

        loader = new THREE.OBJLoader(manager);

        loader.load('http://udam.asia/demo/model3d-threejs/female_croupier_2013-03-26.obj', function (event) {
          var object = event;
          object.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
              child.material.map = texture;
            }
          });

          object.scale = new THREE.Vector3(25, 25, 25);

          scene.add(object);
        });

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(640, 480);
        container.appendChild(renderer.domElement);
      }

      function animate() {
        requestAnimationFrame(animate);

        controls.update();
        camera.lookAt(scene.position);
        renderer.render(scene, camera);
      }
    </script>
  </body>
</html>

Demo

Demo Page

未分類 recent post

  1. Install sbt 1.0.0 and run sample template

  2. Visualization of Neural Network and its Train…

  3. [Machine Learning]Created docker image includ…

  4. [Node.js]How to write batch script with Node.…

  5. [Hive]Get top n items for each category

関連記事

Comment

  1. No comments yet.

  1. No trackbacks yet.

PAGE TOP