Javascript 天空盒纹理不显示_Javascript_Three.js

Javascript 天空盒纹理不显示

javascript three.js

Javascript 天空盒纹理不显示,javascript,three.js,Javascript,Three.js,我正在尝试学习THREE.js，但我很难找到一个简单的skybox来展示。我尝试了100种不同的方法，但似乎都不管用——太少的文档和许多不同的版本的结合让我完全被束缚住了。我在这里已经穷途末路了我认为这可能与加载图像所需的时间有关，但我尝试输入一些“加载程序”代码，但没有效果（因为它似乎做得不多，所以被删除）。我愿意相信，我只是没有以“正确的方式”完成它——我很难找到适用于当前版本的示例 <html> <head> <title>Skybox Demo&

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


Skybox演示画布{宽度：100%；高度：100%}
var容器；
var渲染器；
var cameraCube，sceneCube；
var skyboxMesh；
var cubeTarget；
var-mouseX=0；
var-mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
cameraCube=新的三透视照相机（50，window.innerWidth/window.innerHeight，11000）；
sceneCube=new THREE.Scene（）；
//加载立方体纹理
var path=“纹理/cube/”；
var格式='.jpg'；
var url=[path+'px'+格式，path+'nx'+格式，
路径+py+格式，路径+ny+格式，
路径+‘pz’+格式，路径+‘nz’+格式]；
var skyCubeTexture=THREE.ImageUtils.loadTextureCube（URL）；
skyCubeTexture.format=THREE.RGBFormat；
//立方体着色器
var shader=THREE.ShaderUtils.lib[“cube”]；
shader.uniforms[“tCube”]。纹理=skyCubeTexture；
var material=新的3.ShaderMaterial({
fragmentShader:shader.fragmentShader，
vertexShader:shader.vertexShader，
制服，制服，
depthWrite:false，
侧面：三。背面
});
var skyboxMesh=新的三点网格（新的三点立方计量法（100100100），材料）；
添加（skyboxMesh）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.autoClear=false；
container.appendChild（renderer.doElement）；
}
函数animate（）{
render（）；
请求动画帧（动画）；
}
函数render（）{
var timer=-new Date（）.getTime（）*0.0002；
cameraCube.position.x=10*Math.cos（定时器）；
cameraCube.position.z=10*Math.sin（定时器）；
lookAt（{x:0，y:0，z:0}）；
.clear（）；
renderer.render（sceneCube、cameraCube）；
}

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

three.js是alpha版本，网络上的许多例子都过时了

最好从“official”three.js示例开始，因为它们与当前库一起工作

您需要正确指定纹理：

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

这是最近的变化

three.js r.53