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

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

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

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

JavaScript

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

WebGL

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

Q&A

解決済

1回答

5775閲覧

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

afroscript

総合スコア148

Three.js

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

JavaScript

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

WebGL

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

0グッド

0クリップ

投稿2016/06/26 08:11

JavaScript/Three.js初心者です。

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

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

JavaScript

1var planeGeo = new THREE.PlaneGeometry(10,10,10); 2var planeMesh = new THREE.MeshBasicMaterial({color: 0x333333, side: THREE.DoubleSide}); 3var 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

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

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

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

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

##main.js

javascript

1var renderer = new THREE.WebGLRenderer(); 2renderer.setSize(window.innerWidth, window.innerHeight); 3renderer.setPixelRatio(window.devicePixelRatio); 4 5//camera 6var fov = 75; 7var aspect = window.innerWidth / window.innerHeight; 8var near = 0.1; 9var far = 1000; 10var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 11var camera_position_x0 = 0; 12var camera_position_y0 = 0; 13var camera_position_z0 = -10.0; 14camera.position.set(camera_position_x0,camera_position_y0,camera_position_z0); 15 16var controls = new THREE.OrbitControls(camera, renderer.domElement); 17 18var scene = new THREE.Scene(); 19 20document.body.appendChild(renderer.domElement); 21 22//Planeを回転させて表示 23var planeGeo = new THREE.PlaneGeometry(10,10,10); 24var planeMesh = new THREE.MeshBasicMaterial({color: 0x333333, side: THREE.DoubleSide}); 25var plane = new THREE.Mesh( planeGeo, planeMesh ); 26plane.position.set(2.0, 0, 0.0); 27//plane.rotation.y = Math.Pi/2; ←★ここのコメントアウトをなくすと表示されなくなります…!★ 28scene.add( plane ); 29 30//Light 31var light = new THREE.DirectionalLight(0xffffff); 32light.position.set(0,30,-50); 33scene.add(light); 34 35//環境光 36var ambient = new THREE.AmbientLight(0x333333); 37scene.add(ambient); 38 39//レンダリング 40function renderRender() { 41 renderer.render(scene, camera); 42 requestAnimationFrame(animate); 43} 44 45//animate 46function animate(){ 47 renderRender() 48} 49 50animate(); 51

##index.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> 6<meta name="apple-mobile-web-app-capable" content="yes" /> 7<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 8<title>teraVR360</title> 9<style rel="stylesheet" href="css/index.css"></style> 10<script src="js/three.min.js"></script> 11<script src="js/OrbitControls.js"></script> 12</head> 13 14<body> 15<script> 16(function () { 17 'use strict'; 18 19 var query = location.search.slice(1); 20 21 function loadScript(fileName) { 22 fileName = fileName || 'main'; 23 var script = document.createElement('script'); 24 script.src = 'js/' + fileName + '.js'; 25 document.head.appendChild(script); 26 } 27 28 loadScript(query); 29}()); 30</script> 31</body> 32</html> 33

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

Planeは厚みのないオブジェクトなので、90度回転させたら見えなくなります。
試しに Math.PI / 4 とかで90度以外を指定してみるとしっかり回転しているのが分かると思いますよ。

投稿2016/06/26 08:14

edo_m18

総合スコア2283

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

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

afroscript

2016/06/26 08:28 編集

edo_m18さん!早い…!!ありがとうございます!! しかし、 ``` Math.PI / 4 ``` でもやはり表示されず 一応OrbitControls.jsでマウス操作できるようにしてるのですが、 カメラアングルを変えても表示されない状況です...!!
afroscript

2016/06/26 08:32

すみません、タイポのようでした。。。 >Math.Pi / 2 でなく、 >Math.PI / 4 でした。。。 お恥ずかしい。。。 (個別連絡でedo_m18さんよりご指摘いただいたので、この回答をベストアンサーとさせていただきます...!!)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問