###前提・実現したいこと
Three.jsを用いて3DCGを表示させる際に,
複数のカメラを設定して,それぞれのカメラからのview(?)を別々のウィンドウで表示したいorそのように見えるようにしたいと考えています.
調べてみて同じウィンドウを複数に分割して表示する方法はわかるのですが,どのようにすれば別ウィンドウで同じものを別の角度から見ているようなプログラムが実現できるのでしょうか?
個別に動けば良いということではなくて,別ウィンドウを用いて別の角度などから見えているという形を目指しています.
現在はElectronのウィンドウで実行されています.
###該当のソースコード
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 body {margin: 0;} 7 canvas {width: 100%; height: 100%} 8 </style> 9 </head> 10 11 <body> 12 <script src="js/three.min.js"></script> 13 <script> 14var geometry, material, mesh 15var cameraR, cameraL, scene, renderer 16 17init() 18animate() 19 20function init() { 21 scene = new THREE.Scene() 22 geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ) 23 material = new THREE.MeshNormalMaterial() 24 mesh = new THREE.Mesh( geometry, material ) 25 scene.add( mesh ) 26 renderer = new THREE.WebGLRenderer( { antialias: true } ) 27 renderer.autoClear = false 28 renderer.setSize( window.innerWidth, window.innerHeight ) 29 document.body.appendChild( renderer.domElement ) 30 31 cameraL = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10) 32 cameraL.position.z = 1 33 scene.add( cameraL ) 34 cameraL.lookAt( scene.position ) 35 36 cameraR = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10) 37 cameraR.position.z = 5 38 scene.add( cameraR ) 39 cameraR.lookAt( scene.position ) 40} 41 42function animate() { 43 var SCREEN_WIDTH = window.innerWidth 44 var SCREEN_HEIGHT = window.innerHeight 45 cameraL.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT 46 cameraR.aspect = 0.5 * SCREEN_WIDTH / SCREEN_HEIGHT 47 cameraL.updateProjectionMatrix() 48 cameraR.updateProjectionMatrix() 49 50 requestAnimationFrame( animate ) 51 52 mesh.rotation.x += 0.01 53 mesh.rotation.y += 0.02 54 55 renderer.setViewport(1, 1, 0.5 * SCREEN_WIDTH - 2, SCREEN_HEIGHT - 2) 56 renderer.render( scene, cameraL ) 57 58 renderer.setViewport(0.5 * SCREEN_WIDTH + 1, 1, 0.5 * SCREEN_WIDTH - 2, SCREEN_HEIGHT - 2) 59 renderer.render( scene, cameraR ) 60 61} 62 </script> 63 </body> 64 65 66</html>
現在はこのように,一つのウィンドウを半分に分割して,右と左にレンダリングされていますが,これをそれぞれ別のwindowに表示したいです.
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。