three实现星星粒子跟随鼠标动画效果代码
代码语言:html
所属分类:粒子
代码描述:three实现星星粒子跟随鼠标动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html,body { height:100%; } body { margin:0; background-color:#000; } #canvas { display:block; width:100%; height:100%; } body.o-start #canvas { cursor:none; } #message { position:absolute; right:0; bottom:0; left:0; color:rgba(255,255,255,0.7); font-family:Georgia,serif; font-size:0.9rem; text-align:center; letter-spacing:0.1em; pointer-events:none; opacity:0; transition:opacity 500ms; } body.o-start #message { opacity:1; } </style> </head> <body><canvas id="canvas"></canvas> <p id="message">Move your mouse</p> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.103.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="module"> parcelRequire = (function (init) { // Save the require from previous bundle to this closure if any var previousRequire = typeof parcelRequire === 'function' && parcelRequire; var nodeRequire = typeof require === 'function' && require; var modules = {}; function localRequire(name, jumped) { if (name in modules) { return modules[name]; } // if we cannot find the module within our internal map or // cache jump to the current global require ie. the last bundle // that was added to the page. var currentRequire = typeof parcelRequire === 'function' && parcelRequire; if (!jumped && currentRequire) { return currentRequire(name, true); } // If there are other bundles on this page the require from the // previous one is saved to 'previousRequire'. Repeat this as // many times as there are bundles until the module is found or // we exhaust the require chain. if (previousRequire) { return previousRequire(name, true); } // Try the node require function if it exists. if (nodeRequire && typeof name === 'string') { return nodeRequire(name); } var err = new Error('Cannot find module \'' + name + '\''); err.code = 'MODULE_NOT_FOUND'; throw err; } localRequire.register = function register(id, exports) { modules[id] = exports; }; modules = init(localRequire); localRequire.modules = modules; return localRequire; })(function (require) { function $parcel$interopDefault(a) { return a && a.__esModule ? { d: a.default } : { d: a }; } function $pTw7$var$_toConsumableArray(arr) { return $pTw7$var$_arrayWithoutHoles(arr) || $pTw7$var$_iterableToArray(arr) || $pTw7$var$_nonIterableSpread(); } function $pTw7$var$_nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } function $pTw7$var$_iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } function $pTw7$var$_arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } function $pTw7$var$_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function $pTw7$var$_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); } } function $pTw7$var$_createClass(Constructor, protoProps, staticProps) { if (protoProps) $pTw7$var$_defineProperties(Constructor.prototype, protoProps); if (staticProps) $pTw7$var$_defineProperties(Constructor, staticProps); return Constructor; } // import * as THREE from 'three' // import TrackballControls from 'three-trackballcontrols' // import './three/postprocessing' // THREE.TrackballControls = TrackballControls /*! * Three.js Wrapper * forked from https://github.com/zadvorsky/three.bas/blob/86931253240abadf68b7c62edb934b994693ed4a/examples/_js/root.js */ var $pTw7$export$default = /*#__PURE__*/ function () { function THREERoot(params) { var _this$camera$position, _this = this; $pTw7$var$_classCallCheck(this, THREERoot); // defaults var _params$container = params.container, container = _params$container === void 0 ? document.body : _params$container, _params$fov = params.fov, fov = _params$fov === void 0 ? 45 : _params$fov, zNear = params.zNear, zFar = params.zFar, _params$cameraPositio = params.cameraPosition, cameraPosition = _params$cameraPositio === void 0 ? [0, 0, 30] : _params$cameraPositio, _params$createCameraC = params.createCameraControls, createCameraControls = _params$createCameraC === void 0 ? false : _params$createCameraC, _params$isAutoStart = params.isAutoStart, isAutoStart = _params$isAutoStart === void 0 ? true : _params$isAutoStart, _params$pixelRatio = params.pixelRatio, pixelRatio = _params$pixelRatio === void 0 ? window.devicePixelRatio : _params$pixelRatio, _params$antialias = params.antialias, antialias = _params$antialias === void 0 ? window.devicePixelRatio === 1 : _params$antialias, _params$alpha = params.alpha, alpha = _params$alpha === void 0 ? false : _params$alpha, _params$clearColor = params.clearColor, clearColor = _params$clearColor === void 0 ? 0x000000 : _params$clearColor, aspect = params.aspect, _params$canvas = params.canvas, canvas = _params$canvas === void 0 ? document.createElement('canvas') : _params$canvas, _params$speed = params.speed, speed = _params$speed === void 0 ? 60 / 1000 : _params$speed, interval = params.interval, _params$firstTime = params.firstTime, firstTime = _params$firstTime === void 0 ? 0 : _params$firstTime, _params$isDev = params.isDev, isDev = _params$isDev === void 0 ? false : _params$isDev; this.speed = speed; this.interval = interval; this.time = this.firstTime = firstTime; this.stopTime = 0; // maps and arrays this.updateCallbacks = []; this.resizeCallbacks = []; this.objects = {}; // renderer this.renderer = new THREE.WebGLRenderer({ antialias: antialias, alpha: alpha, canvas: canvas }); this.renderer.setPixelRatio(pixelRatio); this.renderer.setClearColor(clearColor, alpha ? 0 : 1); this.canvas = this.renderer.domElement; // container this.container = typeof container === 'string' ? document.querySelector(container) : container; !params.canvas && this.container.appendChild(this.canvas); this.aspect = aspect || this.container.clientWidth / this.container.clientHeight; this.setSize(); // camera this.camera = new THREE.PerspectiveCamera(fov, this.width / this.height, zNear, zFar); (_this$camera$position = this.camera.position).set.apply(_this$camera$position, $pTw7$var$_toConsumableArray(cameraPosition)); this.camera.updateProjectionMatrix(); // scene this.scene = new THREE.Scene(); // resize handling this.resize(); window.addEventListener('resize', function () { _this.resize(); }); // tick / update / render isAutoStart && this.start(); // optional camera controls createCameraControls && this.createOrbitControls(); // pointer this.raycaster = new THREE.Raycaster(); this.pointer = new THREE.Vector2(); // developer mode if (isDev) { document.addEventListener('keydown', function (_ref) { var key = _ref.key; if (key === 'Escape') { _this.toggle(); } }); } } $pTw7$var$_createClass(THREERoot, [{ key: "setSize", value: function setSize() { if (this.aspect) { if (this.container.clientWidth / this.container.clientHeight > this.aspect) { this.width = this.container.clientHeight * this.aspect; this.height = this.container.clientHeight; } else { this.width = this.container.clientWidth; this.height = this.container.clientWidth / this.aspect; } } else { this.width = this.container.clientWidth; this.height = this.container.clientHeight; } } }, { key: "createOrbitControls", value: function createOrbitControls() { var _this2 = this; if (!THREE.TrackballControls) { console.error('TrackballControls.js file is not loaded.'); return; } this.controls = new THREE.TrackballControls(this.camera, this.canvas); this.addUpdateCallback(function () { _this2.controls.update(); }); } }, { key: "start", value: function start() { var _this3 = this; var startTime = this.stopTime || this.firstTime; requestAnimationFrame(function (timestamp) { _this3.startTime = timestamp - startTime; _this3.time = timestamp - _this3.startTime; }); this.tick(); } }, { key: "tick", value: function tick() { var _this4 = this; this.update(); this.render(); this.animationFrameId = requestAnimationFrame(function (timestamp) { _this4.time = timestamp - _this4.startTime; _this4.tick(); }); } }, { key: "update", value: function update() { var time = this.time * this.speed; time = this.interval ? time % this.interval : time; this.updateCallbacks.forEach(function (fn) { fn(time); }); } }, { key: "render", value: function r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0