プログラミング
1778 view

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

Table of 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の公式サイトから取ってくる。
以下のコマンドでそれらのライブラリを取得できる。

download1
2
3
4
5 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 .

download
1 2 3 4 5	`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

model3d1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89 &amp;lt;!doctype html&amp;gt;
&amp;lt;html lang="ja"&amp;gt;
  &amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;title&amp;gt;3D model with three.js&amp;lt;/title&amp;gt;
    &amp;lt;style&amp;gt;canvas { width: 100%; height: 100% }&amp;lt;/style&amp;gt;
  &amp;lt;/head&amp;gt;
  &amp;lt;body&amp;gt;
    &amp;lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"&amp;gt;&amp;lt;/script&amp;gt;
 
    &amp;lt;script src="http://udam.asia/demo/model3d-threejs/TrackballControls.js"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src="http://udam.asia/demo/model3d-threejs/OBJLoader.js"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script src="http://udam.asia/demo/model3d-threejs/Detector.js"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script&amp;gt;
      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);
      }
    &amp;lt;/script&amp;gt;
  &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

model3d
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89	`&lt;!doctype html&gt;` `&lt;html lang="ja"&gt;` `&lt;head&gt;` `&lt;meta charset="UTF-8"&gt;` `&lt;title&gt;3D model` `with` `three.js&lt;/title&gt;` `&lt;style&gt;canvas { width: 100%; height: 100% }&lt;/style&gt;` `&lt;/head&gt;` `&lt;body&gt;` `&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"&gt;&lt;/script&gt;` `&lt;script src="http://udam.asia/demo/model3d-threejs/TrackballControls.js"&gt;&lt;/script&gt;` `&lt;script src="http://udam.asia/demo/model3d-threejs/OBJLoader.js"&gt;&lt;/script&gt;` `&lt;script src="http://udam.asia/demo/model3d-threejs/Detector.js"&gt;&lt;/script&gt;` `&lt;script&gt;` `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);` `}` `&lt;/script&gt;` `&lt;/body&gt;` `&lt;/html&gt;`

Demo

Demo Page

[Twitter4j][Java]twitter4jでリツイート数が最も高いツイ…前の記事

[Java][Webカメラ][背景差分]Webカメラで撮っている動画に簡単な背景…次の記事

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

Target

Environment

Develop

ライブラリの準備

Source Code

Demo

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

C# でオブジェクトの概要を Console.WriteLine で出力する方法

コマンドで C# コンソールアプリケーションを作成する方法

PubSubClient の便利さと注意点

Java の環境構築方法メモ

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

関連記事

[CoffeeScript]HTML5のCanvasでアニメ…

[Jenkins]Coffee Script Coverag…

[git][gitweb][nginx]Ubuntu12.0…

[Perl][Dancer][Apache][Ubuntu1…

[node.js]jQuery Deferred を使ってみ…

[jslint][javascript]jslintをコマン…

コメント