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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Three.js

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

JavaScript

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

Q&A

解決済

1回答

4215閲覧

Three.jsで複数ウィンドウへの表示

ayihis

総合スコア7

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Three.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/11/22 04:57

###前提・実現したいこと
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に表示したいです.

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

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

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

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

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

guest

回答1

0

ベストアンサー

html/javascriptで別のwindowの情報を共有するのは難しいのでクライアントサイドで普通に実装するのは無理です。

無理やり実装するのなら、オンラインゲームみたいにサーバーを立ててajaxでデータを送信しながらもう片方のwindowで受信したデータを元にレンダリングすることになると思います。

投稿2018/12/22 03:11

bochan2

総合スコア2050

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問