[微信小遊戲+Three.JS]給場景添加反射材質，實現3D水珠移動效果

前幾篇博客，我分別加好了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);
    }
  }
} 

 

效果展現