Tech Tips

  1. プログラミング
  2. 1651 view

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

Contents

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

プログラミングの最近記事

  1. PlatformIO IDE for VSCode を使用して VSCode で Ardu…

  2. ROS Docker イメージで発生した GPG error の解消方法

  3. Streamlit で訪れた国を色づけした世界地図を作成できるアプリケーションを作成してみ…

  4. M5Stack Core2 for AWS – ESP32 IoT開発キットで…

  5. D3.js v7 で点・線・テキスト・ツールチップ・ズームを設定する方法

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP