Question

我正在尝试学习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>

Answer 1

要非常小心从网上复制示例。

three.js是alpha版本，并且许多漂浮在网络上的示例已经过时了。

最好从“官方”three.js示例开始，因为它们适用于当前的库。

您需要正确分配纹理：

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

这是最近的变化。

three.js r.53

天空盒纹理没有显示

1 个答案: