0

Ionic および Angular フレームワークと組み合わせて ThreeJS を使用しています。Ionic のチュートリアルに従って回転キューブを取得し、skyBox をシーンに追加するコードを作成しましたが、まったく表示できません。その理由もわかりません。

私のメインの index.html には本体があります:

<body ng-app="ionicApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<ion-nav-bar class="bar-positive">
</ion-nav-bar>

<ion-tabs class="tabs-positive">

    <ion-tab icon="ion-home" ui-sref="home">
        <ion-nav-view name="home">

        </ion-nav-view>
    </ion-tab>

    <ion-tab icon="ion-help" ui-sref="threeJs">
        <ion-nav-view name="help">
        </ion-nav-view>
    </ion-tab>

</ion-tabs>

<ion-nav-view></ion-nav-view>

angular-ui-router を使用して状態を「threeJs」に設定すると、回転キューブが表示されます。ルーティングされる私のhtmlは次のとおりです。

<ion-view title="ThreeJS">
<ion-content padding="true" id="canvas">
    <three-js-canvas></three-js-canvas>
</ion-content>


<script type="application/x-glsl" id="sky-vertex">
varying vec2 vUV;

void main() {
    vUV = uv;
    vec4 pos = vec4(position, 1.0);
    gl_Position = projectionMatrix * modelViewMatrix * pos;
}


<script type="application/x-glsl" id="sky-fragment">
uniform sampler2D texture;
varying vec2 vUV;

void main() {
    vec4 sample = texture2D(texture, vUV);
    gl_FragColor = vec4(sample.xyz, sample.w);
}

three-js-canvas は、threeJS を処理するために作成したカスタム ディレクティブです。そのコードは次のとおりです。

angular.module('ionicApp').directive('threeJsCanvas', function () {
    'use strict';
    console.log("hi");
    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            var scene,
                camera,
                renderer,
                geometry,
                material,
                cube;

            function initCube() {
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(0xFFFFFF, 0);
                element[0].appendChild(renderer.domElement);

                var geometryCube = new THREE.BoxGeometry(1, 1, 1),
                    materialCube = new THREE.MeshBasicMaterial({
                        color: 0x00ff00
                    });
                cube = new THREE.Mesh(geometryCube, materialCube);
                scene.add(cube);
            }

            function initSky() {
                var sphereGeometry = new THREE.SphereGeometry(3000, 60, 40),
                    uniforms = {
                        texture: {
                            type: 't',
                            value: THREE.ImageUtils.loadTexture('img/lowres.jpg')
                        }
                    },

                    sphereMaterial = new THREE.ShaderMaterial({
                        uniforms: uniforms,
                        vertexShader: document.getElementById('sky-vertex').textContent,
                        fragmentShader: document.getElementById('sky-fragment').textContent
                    });
                console.log(document.getElementById('sky-vertex').textContent);
                var skyBox = new THREE.Mesh(sphereGeometry, sphereMaterial);
                skyBox.scale.set(-1, 1, 1);
                skyBox.rotation.order = 'XYZ';
                skyBox.renderDepth = 1000.0;
                scene.add(skyBox);
            }

            function render() {
                requestAnimationFrame(render);
                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;
                camera.position.z = 5;
                renderer.render(scene, camera);
            }
            initCube();
            initSky();
            render();
        }
    };
});

ボタンをクリックして threeJS 状態にルーティングすると、回転する素敵な立方体と空白の白い背景が必要になるだけで、skyBox はどこにも表示されません。どんな提案でも大歓迎です、ありがとう！

4

2 に答える 2

1

1 - スカイボックスに負のスケールを設定することは非常に疑わしいようです。

2 - 球のサイズにさまざまな値を試しましたか? おそらく、それはフラスタムの外側にあります。

3 - 設定してみてください

side = THREE.DoubleSide

あなたのスカイボックスの素材に。

また、なぜ renderDepth を設定しているのですか? 必要ないはずです。

確実に機能するスカイボックス コードを次に示します。

function doSkyDome() {
    var skyGeometry = new THREE.SphereGeometry(5000,50,50);
    var texture;
    texture = THREE.ImageUtils.loadTexture('textures/sky.png');

    var skyMaterial = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide });
    _skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
    _skyBox.material.fog = false;
    _skyBox.position.set(0,0,0);
    _skyBox.rotation.x = Math.PI/4;
    _scene.add( _skyBox );
}

もちろん、lowres.jpg が存在し、ロードされていることを確認してください。

于 2015-01-09T17:13:51.513 に答える
0

私はこれを忘れていたので、時々この問題に遭遇しました。これは非常に単純です。

Threejs ドキュメントに記載されているように、PerspectiveCameraには次のパラメーターがあります。

PerspectiveCamera( fov, aspect, near, far )

1000 の FAR を使用しており、ここで球体に 3000 の半径を追加します。

var sphereGeometry = new THREE.SphereGeometry(3000, 60, 40)

つまり、球体は錐台から外れて見えなくなります。

したがって、SphereGeometry の半径を小さくするか、PerspectiveCamera FAR パラメーターを 3000 より大きい数値に増やすかの 2 つの選択肢があります。

于 2015-12-13T23:03:36.080 に答える