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

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

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

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

JavaScript

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

WebGL

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

解決済

PlaneGeometryを回転させて表示するには?

afroscript
afroscript

総合スコア148

Three.js

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

JavaScript

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

WebGL

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

1回答

0評価

0クリップ

4467閲覧

投稿2016/06/26 08:11

JavaScript/Three.js初心者です。

Three.jsに関する質問です。

下記のように2次元平面のオブジェクト(plane)を作成し、

JavaScript

var planeGeo = new THREE.PlaneGeometry(10,10,10); var planeMesh = new THREE.MeshBasicMaterial({color: 0x333333, side: THREE.DoubleSide}); var plane = new THREE.Mesh( planeGeo, planeMesh );

planeをy軸で90度回転させて表示させようとしております。

http://yomotsu.net/blog/2012/12/01/create-terrain-with-threejs.html
https://www.ibm.com/developerworks/jp/web/library/wa-webgl2/

上記のようなサイトを参考にして

JavaScript

plane.rotation.y = Math.Pi/2;

と書いてみたのですが、planeが表示されなくなります。
(この1行をコメントアウトすると、普通にplaneは表示されるのですが…)

rotationって関数が変わってしまったとかでしょうか...?
うまく調べられず困っております。。。
どなたかお力添えいただけないでしょうか??

ご参考までに、以下にmain.jsとindex.htmlを掲載いたします。

##main.js

javascript

var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); //camera var fov = 75; var aspect = window.innerWidth / window.innerHeight; var near = 0.1; var far = 1000; var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); var camera_position_x0 = 0; var camera_position_y0 = 0; var camera_position_z0 = -10.0; camera.position.set(camera_position_x0,camera_position_y0,camera_position_z0); var controls = new THREE.OrbitControls(camera, renderer.domElement); var scene = new THREE.Scene(); document.body.appendChild(renderer.domElement); //Planeを回転させて表示 var planeGeo = new THREE.PlaneGeometry(10,10,10); var planeMesh = new THREE.MeshBasicMaterial({color: 0x333333, side: THREE.DoubleSide}); var plane = new THREE.Mesh( planeGeo, planeMesh ); plane.position.set(2.0, 0, 0.0); //plane.rotation.y = Math.Pi/2; ←★ここのコメントアウトをなくすと表示されなくなります…!★ scene.add( plane ); //Light var light = new THREE.DirectionalLight(0xffffff); light.position.set(0,30,-50); scene.add(light); //環境光 var ambient = new THREE.AmbientLight(0x333333); scene.add(ambient); //レンダリング function renderRender() { renderer.render(scene, camera); requestAnimationFrame(animate); } //animate function animate(){ renderRender() } animate();

##index.html

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <title>teraVR360</title> <style rel="stylesheet" href="css/index.css"></style> <script src="js/three.min.js"></script> <script src="js/OrbitControls.js"></script> </head> <body> <script> (function () { 'use strict'; var query = location.search.slice(1); function loadScript(fileName) { fileName = fileName || 'main'; var script = document.createElement('script'); script.src = 'js/' + fileName + '.js'; document.head.appendChild(script); } loadScript(query); }()); </script> </body> </html>

どうかよろしくお願いいたしますm(_ _)m

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Three.js

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

JavaScript

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

WebGL

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