zuqqhi2のIT日記

プログラミング + アカデミック + 何か面白いこと

   Jan 12

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

by zuqqhi2 at 2015年1月12日
Pocket

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

Related Posts

  • 2013年5月30日 [Javascript][Three.js]mouse move 前回の記事のindex.htmlに新規部分を追加した以下のmain.jsを読みこませる。 結果は次のようになる。ドラッグで立方体が回転する。 Three.js面白いな。何か作ってみよう。 I make html file which is previous […]
  • 2013年6月10日 [AR][Processing]Draw 3D model 背景 昨日でマーカーに立方体を表示させることができたから、今日は3Dモデルを描画してみる。 実装 メタセコイア形式の3Dモデルをロード&描画するためにMQOViewerというライブラリを使う。 3Dモデルはここからダウンロードしてつかった。 ソースコードは […]
  • 2013年6月9日 [AR]Try to use NyARToolkit 概要 マーカーベースのARプログラムを作成するためのライブラリとしてARToolKitというものがあるが、 それのProcessing版であるNyARToolkitを使用して簡単なARプログラムを作成してみる。 実装 ここから ライブラリをダウンロードして中身を一 […]
  • 2014年11月9日 [jslint]Code quality check using jslint with command 概要 Javascriptは利用方法によるけど運用が難しい言語だと思ってる。 jslintを使用するとコードの品質(?)をチェックすることが出来る。 開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。 web上でも使えるけど、コ […]
  • 2014年12月14日 [Haskell][XML][CompleteSuggestionAPI]Parse result xml of Google Complete Suggestion API with Haskell Target HaskellでGoogle Complete Suggestion APIの結果(XML)をパージングして、候補クエリの配列(の形をした文字列)を取得する。 Environment OSLinux […]
  • 2014年12月21日 [Twitter4j][Java]Retweet most popular tweet with twitter4j Target 一番リツイート数が多いツイートを自動的にリツイートする。 Environment OSLinux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Your email address will not be published. Required fields are marked *