• [微信小游戏+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);
        }
      }
    } 

    效果展示

  • 相关阅读:
    闭包
    保存数据
    Browers Object Model
    JavaScript中的null和undefined
    魔法查询函数
    《黑客与画家》 读书感想
    CakePHP查询数据
    HDFS写入和读取流程
    回调函数
    JAVA中的指针
  • 原文地址:https://www.cnblogs.com/lee-li/p/9219668.html
Copyright © 2020-2023  润新知