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

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

ただいまの
回答率

90.53%

  • JavaScript

    19842questions

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

  • JSON

    1418questions

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

  • Three.js

    143questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,619

MakotoHoshi

score 38

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

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

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

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

if(!Detector.webgl) Detector.addGetWebGLMessage();

// -------------------------
// 設定
// -------------------------
//カメラサイズ
var w  = window.innerWidth;
var h = window.innerHeight;
var aspect = w / h;
//カメラ上下角度
var fov    = 60;
//これよりカメラに近い領域はレンダリングしない
var near   = 1;
//これよりカメラから遠い領域はレンダリングしない
var far    = 1000000;
//シーン
var scene = new THREE.Scene();
//カメラ
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 300);
//レンダラー
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

//ライト
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 150, 0);
scene.add(directionalLight);

var STATS_ENABLED = false;
var stats;
var effect;
var model;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var loader = new THREE.JSONLoader();

init();
animate();

function init(){
    loader.load('obj.json', (geometry, materials) => {
        var wireframe = new THREE.WireframeGeometry(geometry);
        var lineMat= new THREE.LineBasicMaterial({
            //モデルの色
            color: 0x000000
        });
        var model = new THREE.LineSegments(wireframe, lineMat);
        model.material.depthTest = false;
        model.material.transparent = true;
        //透過
        model.material.opacity = 0.3;
        //モデルの大きさ
        model.scale.x = 100;
        model.scale.y = 100;
        model.scale.z = 100;

        scene.add(model);
        var rot = (function(){
            //回転
            requestAnimationFrame(arguments.callee);
            model.rotation.y += 0.005;
            effect.render(scene, camera);
        })();
    });

    var width = window.innerWidth || 2;
    var height = window.innerHeight || 2;

    effect = new THREE.ParallaxBarrierEffect(renderer);
    effect.setSize(width, height);

    if(STATS_ENABLED){
        stats = new Stats();
        container.appendChild(stats.dom);
    }

    document.addEventListener('mousemove', onDocumentMouseMove, false);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize(){
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    var w  = window.innerWidth;
    var h = window.innerHeight;
    renderer.setSize(w, h);
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    effect.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseMove(event){
    mouseX = (event.clientX - windowHalfX) / 5;
    mouseY = (event.clientY - windowHalfY) / 5;
}

function animate(){
    requestAnimationFrame(animate);
    render();
}

function render(){
    camera.position.x += (mouseX - camera.position.x) * .05;
    camera.position.y += (- mouseY - camera.position.y) * .05;
    camera.lookAt(scene.position);
    effect.render(scene, camera);
    if(STATS_ENABLED) stats.update();
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript" src="js/geometry/WireframeGeometry.js"></script>
<script type="text/javascript" src="js/control/TrackballControls.js"></script>
<script type="text/javascript" src="js/effect/ParallaxBarrierEffect.js"></script>

<title>TJS</title>
</head>

<body>
<!-- <script type="text/javascript" src="js/output/outerspace.js"></script> -->
<script type="text/javascript" src="js/output/outerspace_auto.js"></script>
    </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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 18:19

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19842questions

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

  • JSON

    1418questions

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

  • Three.js

    143questions

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