質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3801閲覧

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

twin1

総合スコア7

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2020/11/04 06:00

表示した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>

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

takagi69👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

ファイル名説明
three.jsES5 形式のライブラリ
three.module.jsES6 Module 形式のライブラリ

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

最近の 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 は最近、仕様変更が行われており、第2引数が追加されていることに注意ください。

旧仕様)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

cx20

総合スコア4632

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

twin1

2020/11/06 08:28

回答いただき本当にありがとうございます。 基本的なJavaScriptの仕様を知らずに実装を試みていました。 使用例を挙げていただきスムーズに違いが把握できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問