2

THREE.js で SkyBox を作成したいのですが、作成方法のヒントがいくつか見つかりましたが、うまくいきません。それらをすべて試しましたが、何も機能しません。ファイルパスとイメージパスは正しいです。

コードの問題点と、スカイボックスが表示されない理由を誰か説明できますか?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Earth</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../js/three.min.js"></script>

        <script>

            var camera, scene, renderer;
            var mirrorCube, mirrorCubeCamera; // for mirror material
            var mirrorSphere, mirrorSphereCamera; // for mirror material

            init();
            animate();

            function init() {
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                scene.add(camera);
                camera.position.set(0,150,400);
                camera.lookAt(scene.position);  

                var sides  = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'];
                var scCube = THREE.ImageUtils.loadTexture(sides);
                scCube.format = THREE.RGBFormat;

                var skyShader = THREE.ShaderLib["cube"];
                skyShader.uniform["tCube"].value = scCube;
                var skyMaterial = new THREE.ShaderMaterial( {
                    fragmentShader: skyShader.fragmentShader, vertexShader: skyShader.vertexShader,
                    uniforms: skyShader.uniforms, depthWrite: false, side: THREE.BackSide
                });

                var skyBox = new THREE.Mesh(new THREE.CubeGeometry(500, 500, 500), skyMaterial);
                skyMaterial.needsUpdate = true;

                scene.add(skyBox);  
            }

            function render() 
            {
                mirrorSphere.visible = false;
                mirrorSphereCamera.updateCubeMap( renderer, scene );
                mirrorSphere.visible = true;

                renderer.render( scene, camera );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                renderer.render( scene, camera );
            }

        </script>

    </body>
</html>
4

2 に答える 2

1

環境マップをレンダリングするカメラと、環境マップを含む球体が欠落しているようです。

// Create the enviroment map camera
mirrorSphereCamera = new THREE.CubeCamera( 0.1, 150000, 512 );
mirrorSphereCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add( mirrorSphereCamera );

// Sphere material
var mirrorSphereMaterial = new THREE.MeshBasicMaterial({ 
    envMap: mirrorSphereCamera.renderTarget
});

// Sphere geometry
mirrorSphere = new THREE.Mesh( sphereGeom, mirrorSphereMaterial );
mirrorSphere.position.set( 1000, 1000, 0 );
mirrorSphereCamera.position = mirrorSphere.position;
scene.add(mirrorSphere);
于 2015-06-03T16:17:58.520 に答える
0

シーンにライトを追加していません。

次のコードを使用して照明を追加すると、問題ありません。

// Lighting in general
// Light one
var light = new THREE.PointLight(0x999999, 2, 100);
light.position.set(50, 50, 50);
scene.add(light);

// Light two
var lightScene = new THREE.PointLight(0x999999, 2, 100);
lightScene.position.set(0, 5, 0);
scene.add(lightScene);

もちろん、アンビエント ライトを使用することもできます (私のスカイボックス シーンでは試していませんが)。次の手順でそれが可能になります。

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

それが役立つことを願っています!

于 2016-01-04T16:00:37.327 に答える