首先新建一个新的文件夹.
从prod文件夹拷贝owlly.iife.min.js, 并创建index.html, main.js文件. 结果文件树如下:
.
| - index.html
| - owlly.iife.min.js
| - main.js若要使用Owlly, 请在HTML中加入引用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Owlly</title>
</head>
<body style="position: relative; height: 100vh; width: 100vw; margin: 0;">
<div id="container" style="height: 500px; width: 500px; border: 2px solid red;"></div>
<!-- ↓↓↓↓这里↓↓↓↓ -->
<script type="text/javascript" src="owlly.iife.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<!-- ↑↑↑↑这里↑↑↑↑ -->
</body>
</html>注意, 使用iife版本保证浏览器中调用正常. 若您了解压缩后的es module/common js如何在Webpack等工具中使用, 也可以利用这些文件.
接下来, 我们在main.js内调用Owlly并新建一个正方体:
// 新建 Stage
var stage = new Owlly.Stage();
// 新建 View
var container = document.getElementById('container');
var view = new Owlly.PerspectiveView(container);
stage.bindView(view);
// 新建Controller
var controller = new Owlly.OrbitControl(view);
stage.bindController(controller);
// 新建Element
var shape = new Owlly.Shape({
path: 'm-10,-10l10,-10l10,10l-10,10',
fill: '#ff7777',
stroke: '#ff0000',
strokeOpacity: 1,
zIndex: -10,
height: 20
});
var block = new Owlly.Block(shape);
stage.bindElement(block);
// 若要销毁全部内容, 请调用
// stage.dispose();刷新index.html, 应在俯视视角看到一个正方体, 可以使用鼠标进行视角旋转, 移动等.
所有类文档内并未使用iife模式进行类引用, 因此在实际环境中请使用Owlly.<类名>的方式进行调用.
请使用顶端的搜索功能进行函数, 类的搜索. 右侧也有完整的对外暴露的所有类的说明.