Q&A
こんな感じでしょうか。
https://qiita.com/edo_m18/items/5db35b60112e281f840e
Three.js で オブジェクトの角度 を 弧度法もしくは度数法で取得したいです
そのために オブジェクト.quaternion.xyz を取得してみたのですが、
取得した後 値を使えるようにするために 弧度法や度数法 に直そうとしたのですがよくわかりませんでした。
なので quaternion 以外で オブジェクトの角度 をうまく取得する方法がわかれば良いのですが
今はわからないので quaternion の値を どのようにしたら弧度法に直せるか という方針です。
もし quaternion 以外で オブジェクトの角度を取得する方法を知っていれば こちらの質問も答えていただけると助かります！
以下は質問訂正前の quaternion の値を 弧度法に直そうとしていたものです。
私はとりあえず quaternion * 3.14 でうまくいくかなと思ったのですが
それだけではうまくいかないようです。
下のコードを .html で保存して実行してます。
(赤い箱 と 青の箱 どちらかが正面に見える時が ±45度付近 になります)
(回転しているカメラは スペースで止めれます)
そうするとカメラが回転して画面に camera.quaternion.y が表示されているのですが
±45度 の時には quaternion * 3.14 で 弧度法に直すなら ±0.5 * 3.14 で 1/2π になってほしいのですが
±45度 の時に 表示されている quaternion を見ると 値は ±0.7付近 を示しています
そのため quaternion * 3.14 だけでは 正しく弧度法に直せないことがわかります
Three.js の quaternion を 弧度法 に正しく直すにはどのような式にすれば良いですか？
回答よろしくお願いします！
HTML
1<html> 2 <body style="margin:0"> 3 <canvas id ="test"> 4 </canvas> 5 <canvas id = "UI" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0);"> 6 </canvas> 7 8 <!--Three.jsファイルロード--> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"> 10 </script> 11 12 <script> 13 alert("スペースで回転を一時停止します") 14 15 var width = window.innerWidth 16 var height = window.innerHeight 17 var space = false 18 var speed = 0.01//回転速度 19 var canvas = document.getElementById("UI") 20 var context = canvas.getContext("2d") 21 22 canvas.width = height 23 canvas.height = width 24 25 //画面のリサイズに応じてレンダラーのサイズを調節する 26 window.addEventListener("resize",function(event){ 27 width = window.innerWidth 28 height = window.innerHeight 29 renderer.setSize(width,height) 30 }) 31 //スペースキーが押されたら回転を止める 32 document.addEventListener("keydown",function(event){ 33 if(event.key===" "){ 34 space = true 35 } 36 }) 37 //スペースキーが離されたら回転を始める 38 document.addEventListener("keyup",function(event){ 39 if(event.key===" "){ 40 space = false 41 } 42 }) 43 44 var renderer=new THREE.WebGLRenderer({ 45 canvas: document.querySelector("#test") 46 }) 47 renderer.setSize(width,height) 48 49 var scene=new THREE.Scene() 50 51 var camera=new THREE.PerspectiveCamera(45,width/height) 52 camera.position.set(0,0,0) 53 54 const box0 = new THREE.Mesh(//-45度付近 55 new THREE.BoxGeometry(1,1,1),//,がいる 箱の大きさ 56 new THREE.MeshBasicMaterial({color:"blue"}) 57 ) 58 box0.position.set(3,0,0) 59 scene.add(box0) 60 61 var box1=new THREE.Mesh(//45度付近 62 new THREE.BoxGeometry(1,1,1), 63 new THREE.MeshBasicMaterial({color:"red"}) 64 ) 65 box1.position.set(-3,0,0) 66 scene.add(box1) 67 68 var box2=new THREE.Mesh( 69 new THREE.BoxGeometry(1,1,1), 70 new THREE.MeshBasicMaterial({color:"orange"}) 71 ) 72 box2.position.set(0,0,3) 73 scene.add(box2) 74 75 var box3=new THREE.Mesh( 76 new THREE.BoxGeometry(1,1,1), 77 new THREE.MeshBasicMaterial({color:"green"}) 78 ) 79 box3.position.set(0,0,-3) 80 scene.add(box3) 81 82 context.font="40px HGRE" 83 context.fillStyle = "white" 84 function animation(){ 85 renderer.render(scene,camera)//レンダリング 86 requestAnimationFrame(animation) 87 88 context.clearRect(0,0,width,height) 89 context.fillText(camera.quaternion.y,0,30) 90 if(space==false){ 91 camera.rotation.y+=0.01 92 } 93 94 } 95 animation() 96 </script> 97 </body> 98 99</html>
回答1件
0
ベストアンサー
クオタニオン(THREE.Quaternion)をオイラー角(THREE.Euler)に変換すればよいです
const m = new THREE.Mesh() // 適当な回転を設定済みのオブジェクトとする const e = new THREE.Euler().setFromQuaternion(m.quaternion) // オイラー角に変換 console.log( THREE.MathUtils.radToDeg(e.x), THREE.MathUtils.radToDeg(e.y), THREE.MathUtils.radToDeg(e.z)) // ラジアン -> 度
投稿2021/07/16 06:22
総合スコア76
回答ありがとうございます！KphP9さんのいうようにしてみたらなりました！
分かりやすく簡潔な回答ありがとうございます！
<html>
<body style="margin:0">
<canvas id ="test">
</canvas>
<canvas id = "UI" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0);">
</canvas>
<!--Three.jsファイルロード-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js">
</script>
<script>
alert("スペースで回転を一時停止します")
var width = window.innerWidth
var height = window.innerHeight
var space = false
var speed = 0.01//回転速度
var canvas = document.getElementById("UI")
var context = canvas.getContext("2d")
canvas.width = height
canvas.height = width
//画面のリサイズに応じてレンダラーのサイズを調節する
window.addEventListener("resize",function(event){
width = window.innerWidth
height = window.innerHeight
renderer.setSize(width,height)
})
//スペースキーが押されたら回転を止める
document.addEventListener("keydown",function(event){
if(event.key===" "){
space = true
}
})
//スペースキーが離されたら回転を始める
document.addEventListener("keyup",function(event){
if(event.key===" "){
space = false
}
})
var renderer=new THREE.WebGLRenderer({
canvas: document.querySelector("#test")
})
renderer.setSize(width,height)
var scene=new THREE.Scene()
var camera=new THREE.PerspectiveCamera(45,width/height)
camera.position.set(0,0,0)
const box0 = new THREE.Mesh(//-45度付近
new THREE.BoxGeometry(1,1,1),//,がいる 箱の大きさ
new THREE.MeshBasicMaterial({color:"blue"})
)
box0.position.set(3,0,0)
scene.add(box0)
var box1=new THREE.Mesh(//45度付近
new THREE.BoxGeometry(1,1,1),
new THREE.MeshBasicMaterial({color:"red"})
)
box1.position.set(-3,0,0)
scene.add(box1)
var box2=new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshBasicMaterial({color:"orange"})
)
box2.position.set(0,0,3)
scene.add(box2)
var box3=new THREE.Mesh(
new THREE.BoxGeometry(1,1,1),
new THREE.MeshBasicMaterial({color:"green"})
)
box3.position.set(0,0,-3)
scene.add(box3)
context.font="40px HGRE"
context.fillStyle = "white"
function animation(){
renderer.render(scene,camera)//レンダリング
requestAnimationFrame(animation)
e = new THREE.Euler().setFromQuaternion(camera.quaternion)
angle = THREE.MathUtils.radToDeg(e.y)
context.clearRect(0,0,width,height)
context.fillText(angle,0,30)
if(space==false){
camera.rotation.y+=0.01
}
}
animation()
</script>
</body>
</html>
あなたの回答
tips
プレビュー
