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

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

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

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

JavaScript

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

WebGL

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

Q&A

解決済

1回答

8718閲覧

three.jsでグループ化したメッシュの回転中心軸を変えたい

massy7

総合スコア45

Three.js

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

JavaScript

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

WebGL

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

0グッド

0クリップ

投稿2017/01/08 15:27

編集2017/01/08 15:29

three.js でグループ化したメッシュの回転中心軸を変えたい.

js

1var objectGroup = Array.apply(null, Array(3)).map(function(){return new THREE.Group();}); 2 3 4object[0] = new THREE.Mesh( 5 new THREE.CylinderGeometry( 1, 1, 25 ,32), // w,h,d 6 new THREE.MeshNormalMaterial() 7); 8object[0].position.set( objDefParam[0].posX, objDefParam[0].posY, objDefParam[0].posZ ); 9object[0].rotation.set( objDefParam[0].rotX, objDefParam[0].rotY, objDefParam[0].rotZ ); 10 11(中略) 12 13object[3].rotation.set( objDefParam[3].rotX, objDefParam[3].rotY, objDefParam[3].rotZ ); 14 15objectGroup[0].add( object[0] ); 16objectGroup[0].add( object[1] ); 17objectGroup[0].add( object[2] ); 18objectGroup[0].add( object[3] ); 19scene.add( objectGroup[0] ); 20 21 22var quat = objectGroup[0].quaternion; 23var target = new THREE.Quaternion(); 24var axis = new THREE.Vector3(0,0,1).normalize(); 25 26( function update () { 27 target.setFromAxisAngle(axis, Math.sin(+new Date() / 500)); 28 quat.multiply(target); 29 30(中略) 31 32 renderer.render( scene, camera ); 33} )(); 34

として作成したTHREE.Groupの回転軸を変更したい

イメージ説明
このように上部のシリンダーを軸に回転させたいが,
イメージ説明
このように全体が空間のx,y,z軸を中心に傾いていってしまう.

どのようなコード・機能で実現できるのでしょうか?
よろしくお願いいたします.

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

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

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

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

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

guest

回答1

0

ベストアンサー

私の頭ではこの方法しか思いつかなかった。
回転の中心となる横のシリンダーと同じ位置にgroup(Object3D)を作成。便宜上、pivotという名前にする。
回転させたいgroupの位置を反対にずらして設定する。これで、見た目上位置はそのままになる。
あとはこのpivotを回転させれば、横のシリンダーを中心に回転してる(ように見える)。
demo

投稿2017/01/08 23:19

turbgraphics200

総合スコア4267

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

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

massy7

2017/01/09 07:17

demoまで作成していただきありがとうございます! やりたい動作を設定できました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問