flame-special-effects
Version:
flame-special-effects - flame special effects.
303 lines (294 loc) • 18.5 kB
HTML
<html lang="en">
<!--
Copyright 2024-2025 Yu Hongbo <yuhongbo@member.fsf.org>,
CNOCTAVE <cnoctave@qq.com>
Copying and distribution of this file, with or without modification,
are permitted in any medium without royalty provided the copyright
notice and this notice are preserved. This file is offered as-is,
without any warranty.
-->
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
<meta name="theme-color" content="#00B4FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="flame-special-effects文档">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<title>flame-special-effects文档</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="title" content="flame-special-effects文档" data-qmeta="title">
<meta property="og:title" content="flame-special-effects文档" data-qmeta="ogTitle">
<meta name="twitter:title" content="flame-special-effects文档" data-qmeta="twitterTitle">
<meta name="description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="description">
<meta property="og:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="ogDesc">
<meta name="twitter:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="twitterDesc">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div id="q-app">
<q-layout view="hHh LpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar class="bg-primary text-white q-ny-md shadow-2">
<q-btn stretch flat label="Octave中文网" @click="goTo('http://cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="flame-special-effects文档" @click="scrollToTop()"></q-btn>
<q-separator dark vertical></q-separator>
<q-space></q-space>
<q-separator dark vertical></q-separator>
<q-btn-dropdown stretch flat icon="translate" label="切换文档语言">
<q-list>
<q-item clickable v-close-popup @click="goTo('index.html')">
<q-item-section>
<q-item-label>zh-CN 简体中文</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="中文版Octave文档" @click="goTo('http://docs.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="学术交流论坛" @click="goTo('http://forum.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="新闻" @click="goTo('https://octave.org/news.html')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="使用方法" @click="goTo('https://wiki.octave.org/Using_Octave')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="免费下载" @click="goTo('https://octave.org/download')"></q-btn>
</q-toolbar>
</q-header>
<q-drawer class="bg-primary" show-if-above v-model="leftDrawerOpen" side="left" bordered elevated>
<q-list class="title1 text-white bg-primary">
<q-item clickable v-ripple @click="goToID('#homepage')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
项目首页
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#cdn')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
CDN引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#npm')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
NPM安装
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#dependency')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
依赖库
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#import')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
import引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#require')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
require引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用flame-special-effects.js
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#live_demo')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
在线演示
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#common_examples')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
常见用例
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#references')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
引用flame-special-effects
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<div style="position: relative;">
<q-img src="banner0.png" spinner-color="white" style="width: 100%; height: 300px;"></q-img>
<div class="q-mx-md rainbow-text"
style="line-height: 300px; font-size: 100px; position: absolute; left: 0%; top: 0%;">flame-special-effects文档
</div>
</div>
<div class="container">
<div class="main">
<div class="text-h5 q-ma-md text-red-10">欢迎广大开发者将此文档翻译为其他语言。</div>
<q-btn id="homepage" class="title1 text-white bg-primary" stretch flat
label="项目首页：https://github.com/CNOCTAVE/flame-special-effects" @click="goTo('https://github.com/CNOCTAVE/flame-special-effects')"></q-btn>
<q-separator></q-separator>
<div id="cdn" class="title1 q-ma-md text-primary">CDN引入方式</div>
<p class="q-ma-md"><script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script></p>
<p class="q-ma-md"><script src="https://unpkg.com/flame-special-effects@1.0.0/flame-special-effects.js"></script></p>
<p class="q-ma-md" style="color:red;">除了常规的引入写法之外，还需要下载https://unpkg.com/flame-special-effects@1.0.0/flame-apperance.png并放到网页同一目录下。</p>
<q-separator></q-separator>
<div id="npm" class="title1 q-ma-md text-primary">NPM安装</div>
<p class="q-ma-md">$ npm install three flame-special-effects</p>
<q-separator></q-separator>
<div id="dependency" class="title1 q-ma-md text-primary">依赖库</div>
<p class="q-ma-md">three.js</p>
<q-separator></q-separator>
<div id="import" class="title1 q-ma-md text-primary">import引入方式</div>
<p class="q-ma-md">import * as THREE from 'three';</p>
<p class="q-ma-md">import FlameSpecialEffects from 'path/to/flame-special-effects';</p>
<p class="q-ma-md" style="color:red;">除了常规的引入写法之外，还需要下载https://unpkg.com/flame-special-effects@1.0.0/flame-apperance.png并放到网页同一目录下。</p>
<q-separator></q-separator>
<div id="require" class="title1 q-ma-md text-primary">require引入方式</div>
<p class="q-ma-md" style="color:red;">three.js不支持require引入。此时需要使用three.js的bundled CDN库文件，像CDN引入一样。</p>
<p class="q-ma-md">const FlameSpecialEffectsExport = require("path/to/flame-special-effects");</p>
<p class="q-ma-md" style="color:red;">除了常规的引入写法之外，还需要下载https://unpkg.com/flame-special-effects@1.0.0/flame-apperance.png并放到网页同一目录下。</p>
<q-separator></q-separator>
<div id="how_to_use" class="title1 q-ma-md text-primary">如何使用</div>
<div class="text-h5 q-ma-md text-red-10">初始化火焰div</div>
<p class="q-ma-md">var flame = window.FlameSpecialEffects;</p>
<p class="q-ma-md">flame.init(containerId);</p>
<p class="q-ma-md">containerId: 火焰div的容器DOM元素ID</p>
<div class="text-h5 q-ma-md text-red-10">调节火势</div>
<p class="q-ma-md">flame.changeLevel(level);</p>
<p class="q-ma-md">level: 火焰的强度，范围为0-100</p>
<div class="text-h5 q-ma-md text-red-10">销毁火焰div</div>
<p class="q-ma-md">flame.destroy();</p>
<q-separator></q-separator>
<div id="live_demo" class="title1 q-ma-md text-primary">在线演示</div>
<div class="text-h5 q-ma-md text-red-10">调节火势</div>
<iframe src="demo1.html" width="100%" height="800px"></iframe>
<div class="text-h5 q-ma-md text-red-10">“炭火烤肉”广告牌</div>
<iframe src="demo2.html" width="100%" height="800px"></iframe>
<div class="text-h5 q-ma-md text-red-10">“火烤汉堡”广告牌</div>
<iframe src="demo3.html" width="100%" height="800px"></iframe>
<q-separator></q-separator>
<div id="common_examples" class="title1 q-ma-md text-primary">常见用例</div>
<div class="text-h5 q-ma-md text-red-10">广告牌</div>
<p class="q-ma-md">本项目有逼真的火焰特效，特别适合广告牌的文字和图片展示</p>
<div class="text-h5 q-ma-md text-red-10">HTML5游戏</div>
<p class="q-ma-md">HTML5游戏中常常需要炫酷的火焰特效来吸引玩家的注意</p>
<div class="text-h5 q-ma-md text-red-10">高端网站开发</div>
<p class="q-ma-md">本项目使用three.js API，相比于传统的CSS有更具表现力的特效，更适合用于开发高端网站</p>
<q-separator></q-separator>
<div id="references" class="title1 q-ma-md text-primary">引用flame-special-effects</div>
<div class="text-h5 q-ma-md text-red-10">如果你在学术研究中涉及flame-special-effects，那么可以按需引用以下内容。</div>
<div class="text-h5 q-ma-md text-red-10">flame-special-effects源码(BibTeX)</div>
<p class="q-ma-md">@misc{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {flame-special-effects},
year = {2025},
howpublished = {\url{https://github.com/CNOCTAVE/flame-special-effects}},
}</p>
<div class="text-h5 q-ma-md text-red-10">flame-special-effects文档(BibTeX)</div>
<p class="q-ma-md">@techreport{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {flame-special-effects Document},
institution = {BA DU XIN SHANG},
year = {2025},
number = {25},
month = {6},
url = {https://cnoctave.github.io/flame-special-effects/index.html},
urldate = {2025-06-25},
}</p>
</div>
</div>
<q-toolbar class="bg-grey-8 text-white q-my-md shadow-2">
<q-btn-dropdown stretch flat label="版权所有 ©">
<q-list>
<q-item clickable v-close-popup @click="goTo('http://cnoctave.cn')">
<q-item-section>
<q-item-label>© 2024-2025 CNOCTAVE</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="goTo('https://orcid.org/0009-0007-9436-4161')">
<q-item-section>
<q-item-label>© 2024-2025 Yu Hongbo</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="此文档受Creative Commons Attribution-NoDerivatives 4.0 International License协议保护。"
@click="goTo('https://creativecommons.org/licenses/by-nd/4.0/')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="下载此文档的源码"
@click="goTo('https://github.com/CNOCTAVE/flame-special-effects')"></q-btn>
</q-toolbar>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
<script>
const App = {
data() {
return {
scrollToTop() {
window.scrollTo(0, 0);
},
goTo(target) {
window.open(target, '_blank');
},
goToID(target) {
window.open(target, '_self');
},
leftDrawerOpen: true,
};
},
};
const app = Vue.createApp(App);
app.use(Quasar)
app.mount('#q-app')
</script>
<script>
hljs.highlightAll();
</script>
</body>
</html>