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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Three.js

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

JavaScript

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

Q&A

解決済

1回答

5436閲覧

three.jsでjsonモデルを読み込むとオブジェクトが二重になり、点線になる

退会済みユーザー

退会済みユーザー

総合スコア0

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Three.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/01/24 07:14

編集2017/01/24 07:15

http://hoshi.dimension.sc/three/

↑のようにthree.jsでjsonモデルを読み込むと、オブジェクトが二重になり、さらに点線になってしまいます。
実線のワイヤーフレームでオブジェクトは重ならない、というのが理想ですが、どのようにすれば実現できますか?

コードは以下のようになっており、ParallaxBarrierEffectを実装してからおかしくなりました。
しかし、ParallaxBarrierEffectを使用しないと、マウスを動かした時に3Dのパララックス機能がなくなってしいます。

よろしくお願いいたします。

js

1if(!Detector.webgl) Detector.addGetWebGLMessage(); 2 3// ------------------------- 4// 設定 5// ------------------------- 6//カメラサイズ 7var w = window.innerWidth; 8var h = window.innerHeight; 9var aspect = w / h; 10//カメラ上下角度 11var fov = 60; 12//これよりカメラに近い領域はレンダリングしない 13var near = 1; 14//これよりカメラから遠い領域はレンダリングしない 15var far = 1000000; 16//シーン 17var scene = new THREE.Scene(); 18//カメラ 19var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 20camera.position.set(0, 0, 300); 21//レンダラー 22var renderer = new THREE.WebGLRenderer({ 23 antialias: true 24}); 25renderer.setPixelRatio(window.devicePixelRatio); 26renderer.setSize(w, h); 27renderer.setClearColor(0xffffff, 1); 28document.body.appendChild(renderer.domElement); 29 30//ライト 31var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); 32directionalLight.position.set(0, 150, 0); 33scene.add(directionalLight); 34 35var STATS_ENABLED = false; 36var stats; 37var effect; 38var model; 39var mouseX = 0; 40var mouseY = 0; 41var windowHalfX = window.innerWidth / 2; 42var windowHalfY = window.innerHeight / 2; 43 44var loader = new THREE.JSONLoader(); 45 46init(); 47animate(); 48 49function init(){ 50 loader.load('obj.json', (geometry, materials) => { 51 var wireframe = new THREE.WireframeGeometry(geometry); 52 var lineMat= new THREE.LineBasicMaterial({ 53 //モデルの色 54 color: 0x000000 55 }); 56 var model = new THREE.LineSegments(wireframe, lineMat); 57 model.material.depthTest = false; 58 model.material.transparent = true; 59 //透過 60 model.material.opacity = 0.3; 61 //モデルの大きさ 62 model.scale.x = 100; 63 model.scale.y = 100; 64 model.scale.z = 100; 65 66 scene.add(model); 67 var rot = (function(){ 68 //回転 69 requestAnimationFrame(arguments.callee); 70 model.rotation.y += 0.005; 71 effect.render(scene, camera); 72 })(); 73 }); 74 75 var width = window.innerWidth || 2; 76 var height = window.innerHeight || 2; 77 78 effect = new THREE.ParallaxBarrierEffect(renderer); 79 effect.setSize(width, height); 80 81 if(STATS_ENABLED){ 82 stats = new Stats(); 83 container.appendChild(stats.dom); 84 } 85 86 document.addEventListener('mousemove', onDocumentMouseMove, false); 87 88 window.addEventListener('resize', onWindowResize, false); 89} 90 91function onWindowResize(){ 92 windowHalfX = window.innerWidth / 2; 93 windowHalfY = window.innerHeight / 2; 94 var w = window.innerWidth; 95 var h = window.innerHeight; 96 renderer.setSize(w, h); 97 camera.aspect = w / h; 98 camera.updateProjectionMatrix(); 99 effect.setSize(window.innerWidth, window.innerHeight); 100} 101 102function onDocumentMouseMove(event){ 103 mouseX = (event.clientX - windowHalfX) / 5; 104 mouseY = (event.clientY - windowHalfY) / 5; 105} 106 107function animate(){ 108 requestAnimationFrame(animate); 109 render(); 110} 111 112function render(){ 113 camera.position.x += (mouseX - camera.position.x) * .05; 114 camera.position.y += (- mouseY - camera.position.y) * .05; 115 camera.lookAt(scene.position); 116 effect.render(scene, camera); 117 if(STATS_ENABLED) stats.update(); 118}

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<link rel="stylesheet" type="text/css" href="css/base.css"> 6<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 7<script type="text/javascript" src="js/three.min.js"></script> 8<script type="text/javascript" src="js/stats.min.js"></script> 9<script type="text/javascript" src="js/Detector.js"></script> 10<script type="text/javascript" src="js/geometry/WireframeGeometry.js"></script> 11<script type="text/javascript" src="js/control/TrackballControls.js"></script> 12<script type="text/javascript" src="js/effect/ParallaxBarrierEffect.js"></script> 13 14<title>TJS</title> 15</head> 16 17<body> 18<!-- <script type="text/javascript" src="js/output/outerspace.js"></script> --> 19<script type="text/javascript" src="js/output/outerspace_auto.js"></script> 20 </body> 21</html> 22

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

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

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

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

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

guest

回答1

0

ベストアンサー

描画されている結果は、概ね正しい挙動です。

ParallaxBarrierEffectはパララックスバリア(視差分割)方式の立体視用にエフェクトをかけるものです。
Nintendo 3DSなどのメガネを必要としない立体視の方式です。

3DSが裸眼で立体に見える仕組み
http://www.gamegyokai.com/column/3ds-ragan.htm

Three.jsのParallaxBarrierEffectのデモ
https://threejs.org/examples/webgl_effects_parallaxbarrier.html

マウスを動かした時に3Dのパララックス機能

というのがどのようなものを期待されているかわからないのですが、TrackballControls.jsを読み込んでいるところから推察しますとこのような機能でしょうか?

https://threejs.org/examples/#misc_controls_trackball

こちらは現状TrackballControls.jsを読み込んでいるだけになってしまっており、
コントローラーを使うための記述が無いようです。

上記のソース
https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_trackball.html

またDevTools等で見るとエラーが出ているようですので、こちらも解消されると良いかと思います。

投稿2017/01/24 08:07

編集2017/01/24 08:11
mattari_panda

総合スコア429

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

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

退会済みユーザー

退会済みユーザー

2017/01/24 09:19

もともとそういうエフェクトだということですね。 TrackballControlsは以前に動作させていたもののなごりで、今は使ってません。 ドラッグで動かすのではなく、実現したいのはウインドウ内でマウスを動かすとマウスとは反対に動くという部分だけです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問