文章/答案/技术大牛

发布

社区首页 >问答首页 >Skybox纹理未显示

问Skybox纹理未显示
EN

Stack Overflow用户

提问于 2012-12-07 02:08:50

回答 1查看 475关注 0票数 1

我正在努力学习THREE.js，但我在展示一个简单的skybox时遇到了麻烦。我尝试了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>

javascript

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-12-07 03:11:29

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

three.js是用alpha编写的，网上流传的许多例子都过时了。

最好从“官方”three.js示例开始，因为它们可以与当前库一起使用。

您需要正确指定纹理：

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

这是最近的变化。

three.js r.53

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13749823

复制

相似问题

问Skybox纹理未显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Skybox纹理未显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Skybox纹理未显示
EN