Two.js
Một API vẽ hai chiều dành cho trình duyệt hiện đại. Nó không phụ thuộc vào bất kỳ renderer nào, cho phép cùng một API vẽ trên nhiều ngữ cảnh: webgl, canvas2d và svg.
Sử dụng
Tải phiên bản mới nhất minified library và bao gồm nó vào trang HTML của bạn.
<script src="js/two.min.js"></script>
Bạn cũng có thể cài đặt nó thông qua npm, Node Package Manager:
npm install --save two.js
Hoặc xem thêm how to build the library yourself.
Đây là mã HTML mẫu để vẽ hình chữ nhật xoay trong two.js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/two.min.js"></script>
</head>
<body>
<script>
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);
two.bind('update', function() {
rect.rotation += 0.001;
});
</script>
</body>
</html>
Xây dựng Tùy Chỉnh
Two.js sử dụng nodejs để xây dựng các tệp nguồn. Bạn cần cài đặt nó trước tiên. Sau khi cài đặt, mở cửa sổ dòng lệnh và truy cập thư mục kho lưu trữ:
cd ~/path-to-repo/two.js
npm install
Điều này sẽ cung cấp cho bạn một số thư viện mà sự phát triển của Two.js phụ thuộc vào. Ví dụ, nếu bạn chỉ sử dụng SvgRenderer, bạn có thể cắt giảm kích thước tệp bằng cách loại bỏ các renderer khác. Để làm điều này, chỉnh sửa /utils/build.js để chỉ thêm các tệp bạn muốn. Sau đó chạy:
node ./utils/build
Kết quả /build/two.js và /build/two.min.js sẽ được cập nhật theo yêu cầu của bạn.
Sử dụng Nhập ES6
Từ phiên bản v0.7.5+, Two.js tương thích với Nhập EcmaScript 6. Điều này thường được sử dụng trong các framework hiện đại như React và Angular, cũng như trong việc gói thư viện như webpack, esbuild, và gulp. Mẫu này của mã HTML có thể được tìm thấy tại CodeSandbox:
import React, { useEffect, useRef } from "react";
import Two from "two.js";
export default function App() {
var domElement = useRef();
useEffect(setup, []);
function setup() {
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(domElement.current);
var rect = two.makeRectangle(two.width / 2, two.height / 2, 50, 50);
two.bind("update", update);
return unmount;
function unmount() {
two.unbind("update");
two.pause();
domElement.current.removeChild(two.renderer.domElement);
}
function update() {
rect.rotation += 0.001;
}
}
return <div ref={domElement} />;
}
Ngoài việc nhập, các gói đã xuất bản của Two.js bao gồm các mô-đun cụ thể. Vì vậy, nếu cần, bạn có thể nhập các mô-đun cụ thể từ mã nguồn và gói / nén chúng cho riêng mình như sau:
import { Vector } from 'two.js/src/vector.js';
// In TypeScript environments leave out the ".js"
// when importing modules directly. e.g:
import { Vector } from 'two.js/src/vector';
Mặc dù hữu ích, sự nhập chính của_Two_ import tất cả các mô-đun. Vì vậy, vẫn chưa có cơ chế “tree shaking” đúng cho thư viện, mặc dù nó nằm trong lộ trình phát triển.
Chạy trong Môi trường Headless
Từ phiên bản v0.7.x, Two.js cũng có thể chạy trong môi trường headless, cụ thể là chạy trên máy chủ với sự trợ giúp của một thư viện gọi là Node Canvas. Chúng tôi không thêm Node Canvas vào các phụ thuộc của Two.js vì không cần thiết để chạy nó trong trình duyệt. Tuy nhiên, nó có tất cả các gắn kết cần thiết để chạy trong môi trường đám mây. Để bắt đầu, làm theo hướng dẫn cài đặt trên readme của Automattic. Sau khi bạn đã làm điều đó, chạy:
npm install canvas
npm install two.js
Bây giờ trong một tệp JavaScript, thiết lập cấu trúc của Two.js và lưu ra các khung hình khi cần:
var { createCanvas, Image } = require('canvas');
var Two = require('two.js')
var fs = require('fs');
var path = require('path');
var width = 800;
var height = 600;
var canvas = createCanvas(width, height);
Two.Utils.shim(canvas, Image);
var time = Date.now();
var two = new Two({
width: width,
height: height,
domElement: canvas
});
var rect = two.makeRectangle(width / 2, height / 2, 50, 50);
rect.fill = 'rgb(255, 100, 100)';
rect.noStroke();
two.render();
var settings = { compressionLevel: 3, filters: canvas.PNG_FILTER_NONE };
fs.writeFileSync(path.resolve(__dirname, './images/rectangle.png'), canvas.toBuffer('image/png', settings));
console.log('Finished rendering. Time took: ', Date.now() - time);
process.exit();
Nhật ký Thay đổi
Two.js đã hoạt động từ năm 2012. Để xem danh sách đầy đủ các thay đổi từ phiên bản alpha đầu tiên được xây dựng với Three.js đến các điều chỉnh mới nhất. Xem tại đây.
Và lời cảm ơn lớn đến các nhà tài trợ của chúng tôi, bao gồm:
Home • Releases • Examples • Documentation • Change Log • Help
Chi tiết Tải về:
Tác giả: jonobr1
Mã nguồn: https://github.com/jonobr1/two.js
Giấy phép: MIT license
