前几篇博客,我分别加好了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); } } }
效果展示