ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   Jan 12

[Javascript][Three.js][3D]OBJ形式3Dモデルの表示とマウス操作

by zuqqhi2 at 2015年1月12日
Pocket

Target

OBJ形式の3Dモデルの表示とそのマウス操作

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

ライブラリの準備

three.jsのメイン部分はCDNを使うとして、
OBJ形式のファイルを読むライブラリとマウス操作のライブラリはthree.jsの公式サイトから取ってくる。
以下のコマンドでそれらのライブラリを取得できる。

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]マウス操作 前回の記事のindex.htmlに新規部分を追加した以下のmain.jsを読みこませる。 結果は次のようになる。ドラッグで立方体が回転する。 Three.js面白いな。何か作ってみよう。 I make html file which is previous […]
  • 2013年6月10日 [AR][Processing]3Dモデルの描画 背景 昨日でマーカーに立方体を表示させることができたから、今日は3Dモデルを描画してみる。 実装 メタセコイア形式の3Dモデルをロード&描画するためにMQOViewerというライブラリを使う。 3Dモデルはここからダウンロードしてつかった。 ソースコードは […]
  • 2013年6月9日 [AR]NyARToolkitを使ってみる 概要 マーカーベースのARプログラムを作成するためのライブラリとしてARToolKitというものがあるが、 それのProcessing版であるNyARToolkitを使用して簡単なARプログラムを作成してみる。 実装 ここから ライブラリをダウンロードして中身を一 […]
  • 2014年11月9日 [jslint]jslintをコマンドから使ってコード品質チェック 概要 Javascriptは利用方法によるけど運用が難しい言語だと思ってる。 jslintを使用するとコードの品質(?)をチェックすることが出来る。 開発時にjslintが通るコードを書くようにすると、経験上いくらか運用がマシになる気がする。 web上でも使えるけど、コ […]
  • 2014年12月14日 [Haskell][XML][CompleteSuggestionAPI]HaskellでGoogle Complete Suggestion APIのXML形式の戻り値をパースする Target HaskellでGoogle Complete Suggestion APIの結果(XML)をパージングして、候補クエリの配列(の形をした文字列)を取得する。 Environment OSLinux […]
  • 2014年12月21日 [Twitter4j][Java]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.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です