目 录CONTENT

文章目录

在网页上引入Live2D看板娘(仅限于Cubism 3模型)

米尔嘉
2022-10-15 / 0 评论 / 6 点赞 / 410 阅读 / 592 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

由于加载过慢,本网站不再使用
https://cdn.minterjia.com/love/live2d-moc3/demo.html

<script src="https://cdn.minterjia.com/love/live2d-moc3/js/jquery.min.js"></script>
<!-- Live2DCubismCore -->
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/frame/live2dcubismcore.min.js"></script>
<!-- Include Pixi. -->
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/pixi.min.js"></script>
<!-- Include Cubism Components. -->
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/live2dcubismframework.js"></script>
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/live2dcubismpixi.js"></script>
<!-- User's Script -->
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/l2d.js"></script>
<script src="https://cdn.minterjia.com/love/live2d-moc3/js/main.js"></script>
<div class="Canvas"  id="L2dCanvas"></div>
<script>
    	/* 配置 */
        var config = {
            basePath: 'https://cdn.jsdelivr.net/gh/minterjia/love@gh-pages/AzurLaneL2DViewer/assets',
            role: 'dujiaoshou_4',
            opacity: 1
        }
        var v = new Viewer(config); 
    </script>

<style>
  .Canvas {
	position: fixed;
	left: -300px;
	bottom: 30px;
	width: 500px !important;
	height: 400px !important;
	z-index: 998;
  }
</style>
<div id="live2d" class="live2d">
<canvas id="live2dm" class="live2d" style="z-index: 999!important;"></canvas>
</div>
<script src="https://npm.elemecdn.com/chenyfan-oss@2.0.3"></script>
<style>
  .live2d {
    position: fixed;
	 left: -100px;
	 bottom: -20px;
	 width: 500px !important;
	 height: 437.5px !important;
	 z-index: 998;
  }
</style> 
html
  head
  body
    #live2d.live2d
      canvas#live2dm.live2d(style='z-index: 999!important;')
    script(src='https://npm.elemecdn.com/chenyfan-oss@2.0.3')
    style.
      
      .live2d {
          position: fixed;
      	 left: -100px;
      	 bottom: -20px;
      	 width: 500px !important;
      	 height: 437.5px !important;
      	 z-index: 998;
        }
      
<!-- Live2DCubismCore -->
    <script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/frame/live2dcubismcore.min.js"></script>
    <!-- Include Pixi. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js"></script>
    <!-- Include Cubism Components. -->
    <script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/live2dcubismframework.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/live2dcubismpixi.js"></script>
    <!-- User's Script -->
    <script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/l2d.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/litstronger/live2d-moc3@master/js/main.js"></script>
  

<div class="Canvas"  id="L2dCanvas"></div>
    <script>
    	/* 配置 */
        var config = {
            basePath: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets',
            role: 'dujiaoshou_4',
            opacity: 1
        }
        var v = new Viewer(config); 
    </script>

<style>
		    .Canvas {
		        position: fixed;
		        left: -300px;
		        bottom: 30px;
		        width: 500px !important;
		        height: 400px !important;
		        z-index: 998;
		    }
</style>
6

评论区