1

THREE.jsを学習しようとしていますが、単純なスカイボックスを表示するのに問題があります。私は100の異なることを試しましたが、何も機能していないようです。ドキュメントが少なすぎることと、さまざまなリリースの数が組み合わさって、完全に縛られてしまいました。私はここで私のロープの終わりにいます！

画像の読み込みにかかる時間と関係があるのではないかと思いましたが、「ローダー」コードを入れてみましたが、あまり役に立たなかったようです。しかし、私はそれを「正しい方法」で行わなかったと信じています。現在のリリースで機能する例を見つけるのに苦労しています。

<html>
  <head> <title>Skybox Demo</title> <style>canvas { width: 100%; height: 100% }</style>
  <body>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
    <script>
        var container;
        var renderer;
        var cameraCube, sceneCube;
        var skyboxMesh;
        var cubeTarget;

        var mouseX = 0;
        var mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;


        init();
        animate();

        function init() {

            container = document.createElement('div');
            document.body.appendChild(container);

            cameraCube = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            sceneCube = new THREE.Scene();

            // Load cube textures
            var path = "textures/cube/";
            var format = '.jpg';
            var urls = [ path + 'px' + format, path + 'nx' + format,
                        path + 'py' + format, path + 'ny' + format,
                        path + 'pz' + format, path + 'nz' + format ];
            var skyCubeTexture = THREE.ImageUtils.loadTextureCube(urls);
            skyCubeTexture.format = THREE.RGBFormat;


            // Cube shader
            var shader = THREE.ShaderUtils.lib["cube"];
            shader.uniforms["tCube"].texture = skyCubeTexture;
            var material = new THREE.ShaderMaterial({
                fragmentShader : shader.fragmentShader,
                vertexShader   : shader.vertexShader,
                uniforms       : shader.uniforms,
                depthWrite     : false,
                side           : THREE.BackSide
            });

            var skyboxMesh = new THREE.Mesh( new THREE.CubeGeometry(100, 100, 100), material);
            sceneCube.add(skyboxMesh);

            // Renderer
            renderer = new THREE.WebGLRenderer( {antialias:true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.autoClear = false;
            container.appendChild( renderer.domElement );
        }


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

        function render() {
            var timer = - new Date().getTime() * 0.0002;
            cameraCube.position.x = 10 * Math.cos( timer );
            cameraCube.position.z = 10 * Math.sin( timer );
            cameraCube.lookAt({x:0, y:0, z:0});
            renderer.clear();
            renderer.render(sceneCube, cameraCube);
        }
    </script>
  </body>
</html>
4

1 に答える 1

1

ネットから例をコピーする場合は十分に注意してください。

three.jsはアルファ版であり、ネット上に浮かんでいる例の多くは時代遅れです。

現在のライブラリで動作するため、「公式の」three.jsの例から始めるのが常に最善です。

テクスチャを正しく割り当てる必要があります。

shader.uniforms["tCube"].value = skyCubeTexture;

これは最近の変更です。

three.js r.53

于 2012-12-06T19:11:28.880 に答える