Question

我第一次学习Three.js，和许多其他人一样，我正在尝试使用this link创建一个旋转地球。我已经使用Express和Node设置了本地Web服务器，在尝试访问映像文件时，我没有收到任何CORS错误或任何内容。但我仍然得到的是一块黑色帆布。我的代码：

const WIDTH = 800;
const HEIGHT = 400;
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 1000;

const container = document.querySelector('#content');

const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
const scene = new THREE.Scene();
scene.add(camera);
renderer.setSize(WIDTH, HEIGHT);

container.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0x333333));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);

const earth = new THREE.Mesh(
                new THREE.SphereGeometry(0.5, 32, 32),
                new THREE.MeshPhongMaterial({
                    map: new THREE.TextureLoader().load('/img/cloudless_world.jpg'),
                    bumpMap: new THREE.TextureLoader().load('/img/bump_world_map.jpg'),
                    bumpScale: 0.005,
                    specularMap: new THREE.TextureLoader().load('/img/specular_world_map.png'),
                    specular: new THREE.Color('grey')
                })
              );
scene.add(earth);
camera.position.set(2, 2, 2);
camera.lookAt(earth.position);

renderer.render(scene, camera);

在尝试此操作时，我看到了很多关于问题的帖子，但找不到任何可以帮我修复代码的内容。有人可以帮忙吗？谢谢！

地球图片无法使用Three.js渲染

0 个答案: