天空盒子、球体、立方体都加载出来了，但是球体上没有映射出旋转的立方体

来源：15-4 环境贴图

大艾尔

2023-02-20

老师能帮忙看一下代码中有什么问题吗？谢谢

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo-1</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
  <script src="../lib/three/OrbitControls.js"></script>
</head>
<body>
  
</body>
<script>
  const clock = new THREE.Clock();
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(100, 100, 0);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-10, 10, 90);
  scene.add(spotLight);

  const controls = new THREE.OrbitControls(camera);
  controls.minDistance = 1;
  controls.maxDistance = 50;

  const imgs = [
    "../asserts/sky/right.jpg",
    "../asserts/sky/left.jpg",
    "../asserts/sky/top.jpg",
    "../asserts/sky/bottom.jpg",
    "../asserts/sky/front.jpg",
    "../asserts/sky/back.jpg",
  ];
  const mats = [];
  for (const item of imgs) {
    mats.push(new THREE.MeshBasicMaterial({
      map: THREE.ImageUtils.loadTexture(item),
      side: THREE.DoubleSide,
    }));
  }
  const skyBox = new THREE.Mesh(
    new THREE.BoxGeometry(100, 100, 100),
    new THREE.MeshFaceMaterial(mats)
  );
  scene.add(skyBox);

  const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
  const cubeMaterial = new THREE.MeshBasicMaterial({
    envMap: THREE.ImageUtils.loadTextureCube(mats),
  });
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = -5;
  scene.add(cube);

  const cubeCamera = new THREE.CubeCamera(0.1, 2000, 256);
  scene.add(cubeCamera);
  const sphereGeometry = new THREE.SphereGeometry(4, 15, 15);
  const sphereMaterial = new THREE.MeshBasicMaterial({
    envMap: cubeCamera.renderTarget,
  });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.x = 5;
  scene.add(sphere);

  const animation = () => {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    controls.update(clock.getDelta());
    renderer.render(scene, camera);

    requestAnimationFrame(animation);
    cubeCamera.updateCubeMap(renderer, scene);
  }
  animation();
</script>
</html>

写回答

1回答