zoukankan      html  css  js  c++  java
  • [微信小游戏+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);
        }
      }
    } 

    效果展示

  • 相关阅读:
    个人浏览器安装的插件
    angularjs 1 Failed to read the 'selectionStart' property from 'HTMLInputElement':
    git 配置用户名和邮箱
    修改Atom 隐藏.gitignore忽略的文件/文件夹的配置
    Ubuntu 安装php_intl 扩展
    yii2 ./yii command : No such file or directory
    vagrant yii2 Exception 'yiidbException' with message 'SQLSTATE[HY000] [2002]
    [转载]Ubuntu 14.04设置固定ip
    [转载]删除所有的.svn文件夹
    Centos7.2正常启动关闭CDH5.16.1
  • 原文地址:https://www.cnblogs.com/lee-li/p/9219668.html
Copyright © 2011-2022 走看看