Three.jsでのOrbitControlsの実装とモデルの表示について

表示した3Dモデルをマウスであらゆる方向から見られるようにするためOrbitControlsの実装をしたいです。
three.jsの公式例のwebgl_loader_ply.htmlを参考に次のような3Dモデルを表示するコードを作成しました。

html
1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<title>three.js webgl - PLY</title>
5		<meta charset="utf-8">
6		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7		<link type="text/css" rel="stylesheet" href="main.css">
8	</head>
9	<body>
10		<script type="module">
11
12			import * as THREE from './three.js-master/build/three.module.js';
13			//import Stats from './three.js-master/examples/jsm/libs/stats.module.js';
14            //import * as THREE from './three.js-master/examples/jsm/controls/OrbitControls.js';
15            import { PLYLoader } from './three.js-master/examples/jsm/loaders/PlyLoader.js';
16            
17
18			var container, stats;
19
20			var camera, cameraTarget, scene, renderer;
21
22			init();
23			animate();
24
25			function init() {
26
27				container = document.createElement( 'div' );
28				document.body.appendChild( container );
29
30				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
31				camera.position.set( 3, 0.15, 3 );
32
33				cameraTarget = new THREE.Vector3( 0, - 0.1, 0 );
34
35				scene = new THREE.Scene();
36				scene.background = new THREE.Color( 0x72645b );
37				scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
38
39
40				// PLY file 
41				var loader = new PLYLoader();
42				loader.load('./models/HOGEHOGE.ply', function ( geometry ) {
43            		geometry.computeVertexNormals();
44           			var material = new THREE.MeshBasicMaterial( { vertexColors:true, wireframe: true} );
45            		var mesh = new THREE.Mesh( geometry, material );
46            		mesh.scale.multiplyScalar( 0.01 );
47            		mesh.castShadow = true;
48            		mesh.receiveShadow = true;
49            		scene.add( mesh );
50        		} );
51
52				
53				// Lights
54
55				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
56
57				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
58				addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
59
60				// renderer
61
62				renderer = new THREE.WebGLRenderer( { antialias: true } );
63				renderer.setPixelRatio( window.devicePixelRatio );
64				renderer.setSize( window.innerWidth, window.innerHeight );
65				renderer.outputEncoding = THREE.sRGBEncoding;
66
67				renderer.shadowMap.enabled = true;
68
69				container.appendChild( renderer.domElement );
70
71
72				// resize
73
74				window.addEventListener( 'resize', onWindowResize, false );
75
76			}
77
78			function addShadowedLight( x, y, z, color, intensity ) {
79
80				var directionalLight = new THREE.DirectionalLight( color, intensity );
81				directionalLight.position.set( x, y, z );
82				scene.add( directionalLight );
83
84				directionalLight.castShadow = true;
85
86				var d = 1;
87				directionalLight.shadow.camera.left = - d;
88				directionalLight.shadow.camera.right = d;
89				directionalLight.shadow.camera.top = d;
90				directionalLight.shadow.camera.bottom = - d;
91
92				directionalLight.shadow.camera.near = 1;
93				directionalLight.shadow.camera.far = 4;
94
95				directionalLight.shadow.mapSize.width = 1024;
96				directionalLight.shadow.mapSize.height = 1024;
97
98				directionalLight.shadow.bias = - 0.001;
99
100			}
101
102			function onWindowResize() {
103
104				camera.aspect = window.innerWidth / window.innerHeight;
105				camera.updateProjectionMatrix();
106
107				renderer.setSize( window.innerWidth, window.innerHeight );
108
109			}
110
111			function animate() {
112
113				requestAnimationFrame( animate );
114
115				render();
116				stats.update();
117
118			}
119
120			function render() {
121
122				var timer = Date.now() * 0.0003;
123
124				camera.position.x = Math.sin( timer ) * 2.5;
125				camera.position.z = Math.cos( timer ) * 2.5;
126
127				camera.lookAt( cameraTarget );
128
129				renderer.render( scene, camera );
130
131			}
132		</script>
133	</body>
134</html>
135

ここにOrbitControlsを追加しようとしたのですが、名前が「THREE」以外にしても実装できず、実装の仕方がわかりませんでした。（このプログラムはゆっくりと回転するだけです）

また、こちらのサイトを参考にしてOrbitControlsの導入を試みたのですが下記のコードではモデルすら表示することができませんでした。（サイズ指定したウィンドウは表示されます）

html
1  
2<html>
3    <head>
4      <meta charset="utf-8" />
5      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
6      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.module.js"></script>
7      <script src="three.js-master/examples/jsm/controls/OrbitControls.js"></script>
8      <script src="three.js-master/examples/jsm/loaders/PlyLoader.js"></script>
9  
10      <script>
11        // ページの読み込みを待つ
12        window.addEventListener('load', init);
13  
14        function init() {
15          // サイズを指定
16          const width = 960;
17          const height = 540;
18  
19          // レンダラーを作成
20          const renderer = new THREE.WebGLRenderer({
21            canvas: document.querySelector('#myCanvas')
22          });
23          renderer.setPixelRatio(window.devicePixelRatio);
24          renderer.setSize(width, height);
25  
26          // シーンを作成
27          const scene = new THREE.Scene();
28  
29          // カメラを作成
30          const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000 );
31          // カメラの初期座標を設定
32          camera.position.set(0, 10, 10);
33  
34          // カメラコントローラーを作成
35          const controls = new THREE.OrbitControls(camera);
36          controls.target.set(0, 3, 0);
37          controls.update();
38  
39          // 平行光源を作成
40          const directionalLight = new THREE.DirectionalLight(0xffffff);
41          directionalLight.position.set(1, 1, 1);
42          scene.add(directionalLight);
43          // 環境光を追加
44          const ambientLight = new THREE.AmbientLight(0x333333);
45          scene.add(ambientLight);
46  
47          // PLY file V2
48              var loader = new PLYLoader();
49          loader.load('./models/HOGEHOGE.ply', function ( geometry ) {
50              geometry.computeVertexNormals();
51              var material = new THREE.MeshBasicMaterial( { vertexColors:true, wireframe: true} );
52              var mesh = new THREE.Mesh( geometry, material );
53              mesh.scale.multiplyScalar( 0.01 );
54              mesh.castShadow = true;
55              mesh.receiveShadow = true;
56              scene.add( mesh );
57          } );
58  
59          tick();
60  
61          // 毎フレーム時に実行されるループイベントです
62          function tick() {
63            // レンダリング
64            renderer.render(scene, camera);
65            requestAnimationFrame(tick);
66          }
67        }
68      </script>
69    </head>
70    <body>
71      <canvas id="myCanvas"></canvas>
72    </body>
73  </html>

ご教授いただけますと幸いです。

回答1件

ベストアンサー

だいぶ混乱されているようですね。。

恐らく、混乱の原因は、ES5 と ES6 Modules といった、２つの形式のライブラリの使い方を混同している為と思われます。
Three.js のリポジトリを見ると次の2バージョンが存在することが確認できます。

https://github.com/mrdoob/three.js/tree/r122/build

ファイル名	説明
three.js	ES5 形式のライブラリ
three.module.js	ES6 Module 形式のライブラリ

この２つは混ぜて使用することはできません。

最近の Three.js のサンプルは新しい JavaScript の仕様である ES6 Modules の機能が用いられています。

html
1<script type="module">
2import * as THREE from './three.js-master/build/three.module.js';
3 ...
4</script>

このように script タグで type="module" と書かれているサンプルは ES6 Modules の機能が用いられていることになります。

一方、

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

と書かれているのは古い JavaScript の形式（ES5）のサンプルになります。

以下は、ES6 Modules の場合の OrbitControls の使用例です。

html
1<script type="module">
2import { OrbitControls } from './three.js-master/examples/jsm/controls/OrbitControls.js';
3:
4var controls; // 変数の宣言に controls を追加
5
6function init() {
7    :
8    controls = new OrbitControls( camera, renderer.domElement ); // 追加
9    :
10}
11
12function animate() {
13    requestAnimationFrame( animate );
14    controls.update(); // 追加
15    render();
16}
17
18</script>
19

以下は ES5 の場合の OrbitControls の使用例です。ICS Media さんのところの three.js r110 のサンプルは現状、ES5 形式のサンプルとなります。

html
1<script src="three.js-master/build/three.js"></script>
2<script src="three.js-master/examples/js/controls/OrbitControls.js"></script>
3<script src="three.js-master/examples/js/loaders/PlyLoader.js"></script>
4
5<script>
6var controls; // 変数の宣言に controls を追加
7
8function init() {
9    :
10    controls = new THREE.OrbitControls( camera, renderer.domElement ); // 追加
11    :
12}
13
14function animate() {
15    requestAnimationFrame( animate );
16    controls.update(); // 追加
17    render();
18}
19</script>

なお、OrbitControls は最近、仕様変更が行われており、第２引数が追加されていることに注意ください。

旧仕様）new THREE.OrbitControls(camera);
新仕様）new THREE.OrbitControls(camera, renderer.domElement);

OrbitControls の最新のサンプルについては、Three.js の公式サンプルを参照ください。JavaScript の形式としては ES5 ではなく ES6 Modules の形式のサンプルですのでご注意ください。
https://threejs.org/examples/misc_controls_orbit.html

投稿2020/11/05 20:25