[微信小游戏+Three.JS]给场景添加反射材质，实现3D水珠移动效果

Posted 2020-11-20 leeli73

前几篇博客，我分别加好了3D移动盒子，也给场景加好了天空盒

这篇博客，就给场景再加一些效果

绘制的水珠的源代码来自Three.JS在GitHub上的demo

小游戏所用到的，修改过的JS库，大家可以移步我之前发的博客下载

直接上代码

let THREE = require(\'libs/three.js\')

export default class Game3d {
  constructor() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas
    });
    this.start()
  }
  start() {
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.camera.position.set(-500,150,0);
    this.camera.lookAt(this.scene.position);
    this.scene.background = new THREE.CubeTextureLoader()
      .setPath(\'images/Background/\')
      .load([\'px.jpg\', \'nx.jpg\', \'py.jpg\', \'ny.jpg\', \'pz.jpg\', \'nz.jpg\']);
    //添加水珠
    var geometry = new THREE.SphereBufferGeometry(100, 32, 16);
    var material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: this.scene.background, refractionRatio: 0.95 });
    material.envMap.mapping = THREE.CubeRefractionMapping;
    this.spheres = [];
    for (var i = 0; i < 500; i++) {
      var mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = Math.random() * 1000 - 500;
      mesh.position.y = Math.random() * 1000 - 500;
      mesh.position.z = Math.random() * 1000 - 500;
      mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
      this.scene.add(mesh);
      this.spheres.push(mesh);
    }
    window.requestAnimationFrame(this.loop.bind(this), canvas);
  }
  loop() {
    this.MoveWaterDrops();
    this.renderer.render(this.scene, this.camera);
    window.requestAnimationFrame(this.loop.bind(this), canvas);
  }
  //水珠移动
  MoveWaterDrops() {
    var timer = 0.0001 * Date.now();
    for (var i = 0, il = this.spheres.length; i < il; i++) {
      var sphere = this.spheres[i];
      sphere.position.x = 8000 * Math.cos(timer + i);
      sphere.position.y = 8000 * Math.sin(timer + i * 1.1);
    }
  }
} 

 

效果展示