Three设置场景背景图,三种类型

1.有三种设置背景的办法,效果各自不同

// 1. 普通背景图,一个平面
  // scene.background = new THREE.Color(0xf0f0f0);
  // scene.background = new THREE.Color("rgb(25, 35, 39)");
  // scene.background = new THREE.TextureLoader().load(
  //   "../img/testImg/sky/Back.jpg"
  // );
  // 2. 立方体背景图
  scene.background = new THREE.CubeTextureLoader()
    .setPath("../img/testImg/sky/2/")
    // .load(new Array(6).fill("Back.jpg"));
    .load(["Side1.png", "Side2.png", "Side3.png", "Side4.png", "Side5.png", "Side6.png"])

  // 3. 球型全景(背景)图,通过建立球体,并反向放大100倍实现,其中x放大倍数为负数
  // const geometry = new THREE.SphereGeometry(10, 50, 50);
  // const material = new THREE.MeshBasicMaterial({
  //   map: new THREE.TextureLoader().load("../img/testImg/sky/tycho2t3_80_mys.jpg")
  // });
  // const sphere = new THREE.Mesh(geometry, material);
  // scene.add(sphere);
  // geometry.scale(-100, 100, 100);

代码学习来自ChrisGvo
https://juejin.cn/post/6844904181946384391

上一篇:BestCoder Round #68 (div.2)


下一篇:深入理解 Javascript 面向对象编程(转)