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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/26 08:28 編集
2016/06/26 08:32