个人中心
gpt4 book ai didi

javascript - 天空盒纹理未显示

转载 作者：行者123 更新时间：2023-11-28 02:33:50 25 4
gpt4 key购买 nike

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

最佳答案

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

two.js 处于 alpha 阶段，网上流传的许多示例都已经过时了。

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

您需要正确分配纹理:

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

这是最近的更改。

三.js r.53

关于javascript - 天空盒纹理未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13749823/

25 4 0
文章推荐： php - 谷歌地图API和PHP集成问题
文章推荐： c++ - 抽象类不直接映射，有什么优雅的解决方案吗？
文章推荐： C++ vector remove_if 对
文章推荐： javascript - 循环遍历内部 jquery Accordion 字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com