Question

我尝试将环境贴图应用于球体，并按照以下两个教程设置基本场景，并使用正确的（据我所知）照明和几何体：

但是，出于某种原因，当我添加环境贴图时，球体呈现为一个简单的平坦黑色磁盘。如果没有envMap设置，它会正确渲染彩色球体。

完整代码如下所示，在DOM加载后从.html文件调用Sphere.init（）：

Sphere = {
init: function(){
    this.WIDTH = 800;
    this.HEIGHT = 600;
    this.VIEW_ANGLE = 45;
    this.ASPECT = this.WIDTH / this.HEIGHT;
    this.NEAR = 0.1;
    this.FAR = 10000;

    var container = $('#sphere');

    this.renderer = new THREE.WebGLRenderer();
    this.camera = new THREE.PerspectiveCamera(
    this.VIEW_ANGLE,
    this.ASPECT,
    this.NEAR,
    this.FAR
    );

    this.scene = new THREE.Scene();
    this.scene.add(this.camera);
    this.camera.position.z = 300;
    this.renderer.setSize(this.WIDTH, this.HEIGHT);

    container.append(this.renderer.domElement);

    var urls = [
  'pos-x.png',
  'pos-x.png',
  'pos-x.png',
  'pos-x.png',
  'pos-x.png',
  'pos-x.png'
    ],

cubemap = THREE.ImageUtils.loadTextureCube(urls);
    cubemap.format = THREE.RGBFormat;

    var reflectionMaterial = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  envMap: cubemap
});

    var radius = 50, segments = 16, rings = 16;
    var sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
    var sphere = new THREE.Mesh(sphereGeometry, reflectionMaterial);
    this.scene.add(sphere);

    var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;
    this.scene.add(pointLight);

    this.renderer.render(this.scene, this.camera);
}
};

Answer 1

我认为唯一的问题是你同时声明了url和cubemap。因此立方体图不知道网址是什么。单独的var声明，我打赌你让它工作。

var urls = [
    'pos-x.png',
    'pos-x.png',
    'pos-x.png',
    'pos-x.png',
    'pos-x.png',
    'pos-x.png'
];

var cubemap = THREE.ImageUtils.loadTextureCube(urls);

Three.js - 环境地图呈现黑色

1 个答案: