为什么图像不会在这个 webGL 中显示为纹理？

Question

由于某种原因，图像不会显示，我不知道为什么。

图片在这里http://imgur.com/VtsrmSj。

我是否需要为纹理添加特定属性或以不同方式定义它？还是因为某种原因我找不到像错字一样简单的东西。

    var camera, scene, renderer;
        var geometry, material, mesh;

        function init() {
            scene = new THREE.Scene();
            var width = window.innerWidth;
            var height = window.innerHeight;

            camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 25000);
            camera.position.set(0, 200, 700);
            scene.add(camera);

            var spotlight = new THREE.SpotLight(0xffffff);
            spotlight.position.set(500, 500, 500);
            //spotlight.shadowCameraVisible = true;
            spotlight.shadowDarkness = 0.3;
            spotlight.intensity = 2;
            spotlight.castShadow = true;
            scene.add(spotlight);

            var texture = THREE.ImageUtils.loadTexture('apple.jpg');
            material = new THREE.MeshLambertMaterial({map: texture});

            geometry = new THREE.OctahedronGeometry(100, 0);
            mesh = new THREE.Mesh(geometry, material);
            mesh.position.y = 100;
            mesh.castShadow = true;
            scene.add(mesh);                    

            var planeTexture = THREE.ImageUtils.loadTexture('apple.jpg');
            planeGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
            planeMaterial = new THREE.MeshLambertMaterial({map: planeTexture, side: THREE.DoubleSide});
            plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = Math.PI / -2;
            plane.receiveShadow = true;
            scene.add(plane);

            renderer = new THREE.WebGLRenderer({alpha: 1, antialias: true});
            renderer.setSize(width, height);
            renderer.shadowMapEnabled = true;

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            document.body.appendChild(renderer.domElement);
        }


        init();

Answer 1

我看到图像不是 2 的幂。您是否尝试过具有两倍大小（例如 256 x 256）的图像？