Three.js 美丽的变色瞳孔

Three.js Eyeball 学会如何使用纹理变换实现这样的特效。

three, eye

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2031
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

! function(n) {
    function t(e) {
        if (c[e]) return c[e].exports;
        var i = c[e] = {
            exports: {},
            id: e,
            loaded: !1
        };
        return n[e].call(i.exports, i, i.exports, t), i.loaded = !0, i.exports
    }
    var c = {};
    return t.m = n, t.c = c, t.p = "", t(0)
}([function(module, exports, __webpack_require__) {
    eval("'use strict';\n\nvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }\n\nvar _libAnonymousUtilsRequestAnimationFrame = __webpack_require__(1);\n\nvar _libAnonymousUtilsRequestAnimationFrame2 = _interopRequireDefault(_libAnonymousUtilsRequestAnimationFrame);\n\nvar _Canvas = __webpack_require__(2);\n\nvar _Canvas2 = _interopRequireDefault(_Canvas);\n\n/**\n * Main\n * @constructor\n */\n\nvar Main = (function () {\n    function Main() {\n     _classCallCheck(this, Main);\n\n        this.init();\n  }\n\n   /**\n  * Let's roll\n  */\n\n   _createClass(Main, [{\n     key: 'init',\n      value: function init() {\n\n            // Create canvas\n          this.canvas = new _Canvas2['default']();\n      }\n }, {\n      key: 'update',\n        value: function update() {\n\n          // Update canvas\n          this.canvas.update();\n     }\n }]);\n\n    return Main;\n})();\n\nwindow.main = {};\n\ndocument.addEventListener('DOMContentLoaded', function () {\n   window.main = new Main();\n\n   (function tick() {\n        window.main.update();\n     window.requestAnimationFrame(tick);\n   })();\n});//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9pbXBvcnQtb2JqL2pzL01haW4uZXM2PzY3ZDciXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlcXVlc3RBbmltYXRpb25GcmFtZSBmcm9tICdsaWIvYW5vbnltb3VzL3V0aWxzL1JlcXVlc3RBbmltYXRpb25GcmFtZSc7XG5pbXBvcnQgQ2FudmFzIGZyb20gJy4vQ2FudmFzJztcblxuLyoqXG4gKiBNYWluXG4gKiBAY29uc3RydWN0b3JcbiAqL1xuXG5jbGFzcyBNYWluIHtcblx0XG5cdGNvbnN0cnVjdG9yKCkge1xuXG5cdFx0dGhpcy5pbml0KCk7XG5cblx0fVxuXG5cdGluaXQoKSB7XG5cblx0XHQvLyBDcmVhdGUgY2FudmFzXG5cdFx0dGhpcy5jYW52YXMgPSBuZXcgQ2FudmFzKCk7XG5cblx0fVxuXG5cdHVwZGF0ZSgpIHtcblxuXHRcdC8vIFVwZGF0ZSBjYW52YXNcblx0XHR0aGlzLmNhbnZhcy51cGRhdGUoKTtcblxuXHR9XG59XG5cbi8qKlxuICogTGV0J3Mgcm9sbFxuICovXG5cbndpbmRvdy5tYWluID0ge307XG5cbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ0RPTUNvbnRlbnRMb2FkZWQnLCBmdW5jdGlvbigpe1xuXHR3aW5kb3cubWFpbiA9IG5ldyBNYWluKCk7XG5cblx0KGZ1bmN0aW9uIHRpY2soKXtcblx0XHR3aW5kb3cubWFpbi51cGRhdGUoKTtcblx0XHR3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRpY2spO1xuXHR9KSgpO1xufSk7XHRcblxuXG5cbi8qKiBXRUJQQUNLIEZPT1RFUiAqKlxuICoqIC4vc3JjL2ltcG9ydC1vYmovanMvTWFpbi5lczZcbiAqKi8iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7QUFDQTs7O0FBQUE7QUFDQTs7Ozs7Ozs7QUFNQTtBQUVBO0FBRkE7QUFDQTtBQUdBO0FBRUE7QUFDQTs7Ozs7QUFQQTs7QUFRQTtBQUNBOztBQUVBO0FBRUE7OztBQUVBO0FBQ0E7O0FBRUE7QUFFQTs7O0FBcEJBOzs7QUEyQkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyIsInNvdXJjZVJvb3QiOiIifQ==")
}, function(module, exports) {
    eval('"use strict";\n\n/**\n * Add prefix to requestAnimationFrame function\n * @constructor\n */\nvar RequestAnimationFrame = module.exports = (function() \n{\n   window.requestAnimationFrame = (function()\n    {\n     return  window.requestAnimationFrame ||\n               window.webkitRequestAnimationFrame ||\n             window.mozRequestAnimationFrame ||\n                function(callback)\n                {\n                 window.setTimeout(callback, 1000 / 60);\n               };\n    })();\n})();//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMS5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9fc2hhcmVkL2pzL2xpYi9hbm9ueW1vdXMvdXRpbHMvUmVxdWVzdEFuaW1hdGlvbkZyYW1lLmpzPzlkODkiXSwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG5cbi8qKlxuICogQWRkIHByZWZpeCB0byByZXF1ZXN0QW5pbWF0aW9uRnJhbWUgZnVuY3Rpb25cbiAqIEBjb25zdHJ1Y3RvclxuICovXG52YXIgUmVxdWVzdEFuaW1hdGlvbkZyYW1lID0gbW9kdWxlLmV4cG9ydHMgPSAoZnVuY3Rpb24oKSBcbntcblx0d2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZSA9IChmdW5jdGlvbigpXG5cdHtcblx0XHRyZXR1cm4gIHdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWUgfHxcblx0XHRcdFx0d2luZG93LndlYmtpdFJlcXVlc3RBbmltYXRpb25GcmFtZSB8fFxuXHRcdFx0XHR3aW5kb3cubW96UmVxdWVzdEFuaW1hdGlvbkZyYW1lIHx8XG5cdFx0XHRcdGZ1bmN0aW9uKGNhbGxiYWNrKVxuXHRcdFx0XHR7XG5cdFx0XHRcdFx0d2luZG93LnNldFRpbWVvdXQoY2FsbGJhY2ssIDEwMDAgLyA2MCk7XG5cdFx0XHRcdH07XG5cdH0pKCk7XG59KSgpO1xuXG5cbi8qKioqKioqKioqKioqKioqKlxuICoqIFdFQlBBQ0sgRk9PVEVSXG4gKiogLi9zcmMvX3NoYXJlZC9qcy9saWIvYW5vbnltb3VzL3V0aWxzL1JlcXVlc3RBbmltYXRpb25GcmFtZS5qc1xuICoqIG1vZHVsZSBpZCA9IDFcbiAqKiBtb2R1bGUgY2h1bmtzID0gMFxuICoqLyJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=')
}, function(module, exports, __webpack_require__) {
    eval('"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\n\nvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\n\nvar semVs = __webpack_require__(3);\nvar semFs = __webpack_require__(4);\n\n/**\n * Canvas\n * @constructor\n */\n\nvar Canvas = (function () {\n    function Canvas() {\n       var container = arguments.length <= 0 || arguments[0] === undefined ? document.body : arguments[0];\n\n     _classCallCheck(this, Canvas);\n\n      this.container = container;\n\n     this.mouseX = 0;\n      this.mouseY = 0;\n\n        this.mesh = {};\n\n     THREE.ImageUtils.crossOrigin = \'\';\n\n        this.uniforms = {\n         time: { type: "f", value: 0 },\n            texture_1: {\n              type: \'t\',\n              value: THREE.ImageUtils.loadTexture(\'/uploads/161001/eye.jpg\')\n            }\n     };\n\n      this.init();\n  }\n\n   _createClass(Canvas, [{\n       key: "init",\n      value: function init() {\n\n            // Init render\n            this.initRenderer();\n\n            // Init scene\n         this.scene = new THREE.Scene();\n\n         // Load obj\n           this.createSphere();\n\n            // Add camera\n         this.addCamera();\n\n           // Add light\n          this.addLight();\n\n            // Bind event\n         this.bind();\n\n            // First resize\n           this.resize();\n        }\n }, {\n      key: "bind",\n      value: function bind() {\n\n            window.addEventListener(\'resize\', this.resize.bind(this), false);\n       }\n }, {\n      key: "initRenderer",\n      value: function initRenderer() {\n\n            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });\n           this.container.appendChild(this.renderer.domElement);\n     }\n }, {\n      key: "createSphere",\n      value: function createSphere() {\n\n            var geometry = new THREE.SphereGeometry(100, 50, 50);\n\n           var material = new THREE.ShaderMaterial({\n             uniforms: this.uniforms,\n              vertexShader: semVs,\n              fragmentShader: semFs\n         });\n\n         this.mesh = new THREE.Mesh(geometry, material);\n\n         this.mesh.position.set(0, 0, 0);\n\n            this.scene.add(this.mesh);\n        }\n }, {\n      key: "addCamera",\n     value: function addCamera() {\n\n           // Init camera\n            this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 10000);\n\n          // Set position\n           this.camera.position.set(0, 0, 250);\n\n            // Camera look\n            this.camera.lookAt(0, 0, 0);\n\n            // Add camera\n         this.scene.add(this.camera);\n      }\n }, {\n      key: "addLight",\n      value: function addLight() {\n\n            // Init light\n         var ambient = new THREE.AmbientLight(0x505050);\n\n         // Add light\n          this.scene.add(ambient);\n      }\n }, {\n      key: "update",\n        value: function update() {\n\n          // Render scene\n           this.renderer.render(this.scene, this.camera);\n\n          this.camera.lookAt(0, 0, 0);\n\n            var time = performance.now() * 0.001;\n\n           if (this.mesh) this.mesh.material.uniforms.time.value = time;\n     }\n }, {\n      key: "resize",\n        value: function resize() {\n\n          this.width = window.innerWidth;\n           this.height = window.innerHeight;\n\n           this.windowHalfX = this.width / 2;\n            this.windowHalfY = this.height / 2;\n\n         this.camera.aspect = this.width / this.height;\n            this.camera.updateProjectionMatrix();\n\n           this.renderer.setSize(this.width, this.height);\n       }\n }]);\n\n    return Canvas;\n})();\n\nexports["default"] = Canvas;\nmodule.exports = exports["default"];//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMi5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9pbXBvcnQtb2JqL2pzL0NhbnZhcy5lczY/MDhhMiJdLCJzb3VyY2VzQ29udGVudCI6WyJ2YXIgc2VtVnMgPSByZXF1aXJlKFwiLi9zaGFkZXJzL3NlbS12cy5nbHNsXCIpO1xudmFyIHNlbUZzID0gcmVxdWlyZShcIi4vc2hhZGVycy9zZW0tZnMuZ2xzbFwiKTtcblxuLyoqXG4gKiBDYW52YXNcbiAqIEBjb25zdHJ1Y3RvclxuICovXG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIENhbnZhcyB7XG5cdGNvbnN0cnVjdG9yKGNvbnRhaW5lciA9IGRvY3VtZW50LmJvZHkpIHtcblxuXHRcdHRoaXMuY29udGFpbmVyID0gY29udGFpbmVyO1xuXG5cdFx0dGhpcy5tb3VzZVggPSAwO1xuXHRcdHRoaXMubW91c2VZID0gMDtcblxuXHRcdHRoaXMubWVzaCA9IHt9O1xuXG5cdFx0VEhSRUUuSW1hZ2VVdGlscy5jcm9zc09yaWdpbiA9ICcnO1xuXG5cdFx0dGhpcy51bmlmb3JtcyA9IHtcblx0XHRcdHRpbWU6IHsgdHlwZTogXCJmXCIsIHZhbHVlOiAwIH0sXG5cdFx0XHR0ZXh0dXJlXzE6IHsgXG5cdFx0XHRcdHR5cGU6ICd0JywgXG5cdFx0XHRcdHZhbHVlOiBUSFJFRS5JbWFnZVV0aWxzLmxvYWRUZXh0dXJlKCdodHRwOi8va2V2aW5jaGFzc2FnbmUuY29tL2xhYi9leWUvZXllLmpwZycpIFxuXHRcdFx0fVxuXHRcdH07XG5cblx0XHR0aGlzLmluaXQoKTtcblxuXHR9XG5cblx0aW5pdCgpIHtcblxuXHRcdC8vIEluaXQgcmVuZGVyXG5cdFx0dGhpcy5pbml0UmVuZGVyZXIoKTtcblxuXHRcdC8vIEluaXQgc2NlbmVcblx0XHR0aGlzLnNjZW5lID0gbmV3IFRIUkVFLlNjZW5lKCk7XG5cblx0XHQvLyBMb2FkIG9ialxuXHRcdHRoaXMuY3JlYXRlU3BoZXJlKCk7XG5cblx0XHQvLyBBZGQgY2FtZXJhXG5cdFx0dGhpcy5hZGRDYW1lcmEoKTtcblxuXHRcdC8vIEFkZCBsaWdodFxuXHRcdHRoaXMuYWRkTGlnaHQoKTtcblxuXHRcdC8vIEJpbmQgZXZlbnRcblx0XHR0aGlzLmJpbmQoKTtcblxuXHRcdC8vIEZpcnN0IHJlc2l6ZVxuXHRcdHRoaXMucmVzaXplKCk7XG5cblx0fVxuXG5cdGJpbmQoKSB7XG5cblx0XHR3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5yZXNpemUuYmluZCh0aGlzKSwgZmFsc2UpO1xuXG5cdH1cblxuXHRpbml0UmVuZGVyZXIoKSB7XG5cblx0XHR0aGlzLnJlbmRlcmVyID0gbmV3IFRIUkVFLldlYkdMUmVuZGVyZXIoe2FudGlhbGlhczogdHJ1ZSwgYWxwaGE6IGZhbHNlfSk7XG5cdFx0dGhpcy5jb250YWluZXIuYXBwZW5kQ2hpbGQodGhpcy5yZW5kZXJlci5kb21FbGVtZW50KTtcblxuXHR9XG5cblx0Y3JlYXRlU3BoZXJlKCkge1xuXG5cdFx0bGV0IGdlb21ldHJ5ID0gbmV3IFRIUkVFLlNwaGVyZUdlb21ldHJ5KDEwMCwgNTAsIDUwKTtcblxuXHRcdGxldCBtYXRlcmlhbCA9IG5ldyBUSFJFRS5TaGFkZXJNYXRlcmlhbCh7XG5cdFx0XHR1bmlmb3JtczogdGhpcy51bmlmb3Jtcyxcblx0XHRcdHZlcnRleFNoYWRlcjogc2VtVnMsXG5cdFx0XHRmcmFnbWVudFNoYWRlcjogc2VtRnNcblx0XHR9KTtcblxuXHRcdHRoaXMubWVzaCA9IG5ldyBUSFJFRS5NZXNoKGdlb21ldHJ5LCBtYXRlcmlhbCk7XG5cblx0XHR0aGlzLm1lc2gucG9zaXRpb24uc2V0KDAsIDAsIDApO1xuXG5cdFx0dGhpcy5zY2VuZS5hZGQodGhpcy5tZXNoKTtcblxuXHR9XG5cblx0YWRkQ2FtZXJhKCkge1xuXG5cdFx0Ly8gSW5pdCBjYW1lcmFcblx0XHR0aGlzLmNhbWVyYSA9IG5ldyBUSFJFRS5QZXJzcGVjdGl2ZUNhbWVyYSg3NSwgdGhpcy53aWR0aCAvIHRoaXMuaGVpZ2h0LCAxLCAxMDAwMCk7XG5cblx0XHQvLyBTZXQgcG9zaXRpb25cblx0XHR0aGlzLmNhbWVyYS5wb3NpdGlvbi5zZXQoMCwgMCwgMjUwKTtcblxuXHRcdC8vIENhbWVyYSBsb29rXG5cdFx0dGhpcy5jYW1lcmEubG9va0F0KDAsIDAsIDApO1xuXG5cdFx0Ly8gQWRkIGNhbWVyYVxuXHRcdHRoaXMuc2NlbmUuYWRkKHRoaXMuY2FtZXJhKTtcblxuXHR9XG5cblx0YWRkTGlnaHQoKSB7XG5cblx0XHQvLyBJbml0IGxpZ2h0XG5cdFx0bGV0IGFtYmllbnQgPSBuZXcgVEhSRUUuQW1iaWVudExpZ2h0KDB4NTA1MDUwKTtcblx0XHRcdFx0XHRcblx0XHQvLyBBZGQgbGlnaHRcblx0XHR0aGlzLnNjZW5lLmFkZChhbWJpZW50KTtcblxuXHR9XG5cblx0dXBkYXRlKCkge1xuXG5cdFx0Ly8gUmVuZGVyIHNjZW5lXG5cdFx0dGhpcy5yZW5kZXJlci5yZW5kZXIodGhpcy5zY2VuZSwgdGhpcy5jYW1lcmEpO1xuXG5cdFx0dGhpcy5jYW1lcmEubG9va0F0KDAsIDAsIDApO1xuXHRcdFxuXHRcdGxldCB0aW1lID0gcGVyZm9ybWFuY2Uubm93KCkgKiAwLjAwMTtcblx0XHRcblx0XHRpZiAodGhpcy5tZXNoKSB0aGlzLm1lc2gubWF0ZXJpYWwudW5pZm9ybXMudGltZS52YWx1ZSA9IHRpbWU7XG5cblx0fVxuXG5cdHJlc2l6ZSgpIHtcblxuXHRcdHRoaXMud2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDtcblx0XHR0aGlzLmhlaWdodCA9IHdpbmRvdy5pbm5lckhlaWdodDtcblxuXHRcdHRoaXMud2luZG93SGFsZlggPSB0aGlzLndpZHRoIC8gMjtcblx0XHR0aGlzLndpbmRvd0hhbGZZID0gdGhpcy5oZWlnaHQgLyAyO1xuXG5cdFx0dGhpcy5jYW1lcmEuYXNwZWN0ID0gdGhpcy53aWR0aCAvIHRoaXMuaGVpZ2h0O1xuXHRcdHRoaXMuY2FtZXJhLnVwZGF0ZVByb2plY3Rpb25NYXRyaXgoKTtcblxuXHRcdHRoaXMucmVuZGVyZXIuc2V0U2l6ZSh0aGlzLndpZHRoLCB0aGlzLmhlaWdodCk7XG5cblx0fVxufVxuXG5cbi8qKiBXRUJQQUNLIEZPT1RFUiAqKlxuICoqIC4vc3JjL2ltcG9ydC1vYmovanMvQ2FudmFzLmVzNlxuICoqLyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7OztBQUFBO0FBQ0E7QUFDQTs7Ozs7O0FBTUE7QUFDQTtBQUFBO0FBQ0E7QUFGQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQXZCQTs7QUF3QkE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUVBOzs7QUFFQTtBQUNBO0FBQ0E7QUFFQTs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFFQTs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7OztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFFQTs7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBRUE7OztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQTs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7OztBQXBJQTs7O0FBQUE7Iiwic291cmNlUm9vdCI6IiJ9')
}, function(module, exports) {
    eval('module.exports = "uniform float time;\\nvarying vec2 vN;\\n\\nvoid main() {\\n\\n    vec4 p = vec4( position, 1.0 );\\n    vec3 e = normalize( vec3( modelViewMatrix * p ) );\\n    vec3 n = normalize( normalMatrix * normal );\\n\\n    vec3 r = reflect( e, n );\\n    float m = 2. * sqrt( \\n        pow( r.x + 5., 1.1 * (sin(time) + 1.0) / 2.0 ) + \\n        pow( r.y + 5., 1.1 * (sin(time) + 1.0) / 2.0 ) + \\n        pow( r.z + 5., 1.1 * (sin(time) + 1.0) / 2.0 ) \\n    );\\n\\n    vN = (r.xy / m + 1.) * 0.5;\\n\\n    gl_Position = projectionMatrix * modelViewMatrix * p;\\n\\n}"//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9pbXBvcnQtb2JqL2pzL3NoYWRlcnMvc2VtLXZzLmdsc2w/NmQ0OCJdLCJzb3VyY2VzQ29udGVudCI6WyJtb2R1bGUuZXhwb3J0cyA9IFwidW5pZm9ybSBmbG9hdCB0aW1lO1xcbnZhcnlpbmcgdmVjMiB2TjtcXG5cXG52b2lkIG1haW4oKSB7XFxuXFxuICAgIHZlYzQgcCA9IHZlYzQoIHBvc2l0aW9uLCAxLjAgKTtcXG4gICAgdmVjMyBlID0gbm9ybWFsaXplKCB2ZWMzKCBtb2RlbFZpZXdNYXRyaXggKiBwICkgKTtcXG4gICAgdmVjMyBuID0gbm9ybWFsaXplKCBub3JtYWxNYXRyaXggKiBub3JtYWwgKTtcXG5cXG4gICAgdmVjMyByID0gcmVmbGVjdCggZSwgbiApO1xcbiAgICBmbG9hdCBtID0gMi4gKiBzcXJ0KCBcXG4gICAgICAgIHBvdyggci54ICsgNS4sIDEuMSAqIChzaW4odGltZSkgKyAxLjApIC8gMi4wICkgKyBcXG4gICAgICAgIHBvdyggci55ICsgNS4sIDEuMSAqIChzaW4odGltZSkgKyAxLjApIC8gMi4wICkgKyBcXG4gICAgICAgIHBvdyggci56ICsgNS4sIDEuMSAqIChzaW4odGltZSkgKyAxLjApIC8gMi4wICkgXFxuICAgICk7XFxuXFxuICAgIHZOID0gKHIueHkgLyBtICsgMS4pICogMC41O1xcblxcbiAgICBnbF9Qb3NpdGlvbiA9IHByb2plY3Rpb25NYXRyaXggKiBtb2RlbFZpZXdNYXRyaXggKiBwO1xcblxcbn1cIlxuXG5cbi8qKioqKioqKioqKioqKioqKlxuICoqIFdFQlBBQ0sgRk9PVEVSXG4gKiogLi9zcmMvaW1wb3J0LW9iai9qcy9zaGFkZXJzL3NlbS12cy5nbHNsXG4gKiogbW9kdWxlIGlkID0gM1xuICoqIG1vZHVsZSBjaHVua3MgPSAwXG4gKiovIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==')
}, function(module, exports) {
    eval('module.exports = "uniform float time;\\nuniform sampler2D texture_1;\\nuniform sampler2D texture_2;\\nuniform sampler2D texture_3;\\n\\nvarying vec2 vN;\\n\\nvoid main() {\\n    \\n    vec3 base = (texture2D(texture_1, vN)).rgb;\\n\\n    gl_FragColor = vec4( base, 1.0 ) * vec4((sin(time) + 1.0) / 2., 1., 1., (sin(time) + 1.0) / 2.);\\n\\n}"//@ sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9pbXBvcnQtb2JqL2pzL3NoYWRlcnMvc2VtLWZzLmdsc2w/M2MxMCJdLCJzb3VyY2VzQ29udGVudCI6WyJtb2R1bGUuZXhwb3J0cyA9IFwidW5pZm9ybSBmbG9hdCB0aW1lO1xcbnVuaWZvcm0gc2FtcGxlcjJEIHRleHR1cmVfMTtcXG51bmlmb3JtIHNhbXBsZXIyRCB0ZXh0dXJlXzI7XFxudW5pZm9ybSBzYW1wbGVyMkQgdGV4dHVyZV8zO1xcblxcbnZhcnlpbmcgdmVjMiB2TjtcXG5cXG52b2lkIG1haW4oKSB7XFxuICAgIFxcbiAgICB2ZWMzIGJhc2UgPSAodGV4dHVyZTJEKHRleHR1cmVfMSwgdk4pKS5yZ2I7XFxuXFxuICAgIGdsX0ZyYWdDb2xvciA9IHZlYzQoIGJhc2UsIDEuMCApICogdmVjNCgoc2luKHRpbWUpICsgMS4wKSAvIDIuLCAxLiwgMS4sIChzaW4odGltZSkgKyAxLjApIC8gMi4pO1xcblxcbn1cIlxuXG5cbi8qKioqKioqKioqKioqKioqKlxuICoqIFdFQlBBQ0sgRk9PVEVSXG4gKiogLi9zcmMvaW1wb3J0LW9iai9qcy9zaGFkZXJzL3NlbS1mcy5nbHNsXG4gKiogbW9kdWxlIGlkID0gNFxuICoqIG1vZHVsZSBjaHVua3MgPSAwXG4gKiovIl0sIm1hcHBpbmdzIjoiQUFBQSIsInNvdXJjZVJvb3QiOiIifQ==')
}]);

编译

CSS

HTML

Three.js Eyeball 学会如何使用纹理变换实现这样的特效。

three, eye

编辑器支持Emmet

快捷键

Three.js Eyeball 学会如何使用纹理变换实现这样的特效。

three, eye

WebGL Three.js 流动的水着色器代码

WebGL Three.js 超炫的水晶球（魔法球）特效着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：