@galacean/effects-threejs 0.0.1-alpha.2 → 0.0.1-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -17
- package/dist/index.js +8 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/index.mjs +8 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
# Galacean Effects
|
|
1
|
+
# Galacean Effects THREE.JS Plugin
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
With this plugin, you can load and render Galacean Effects animations within the THREE.JS environment.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Version Information
|
|
6
6
|
|
|
7
7
|
- Three.js 
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Usage
|
|
10
10
|
|
|
11
|
-
### 1、THREE.JS
|
|
11
|
+
### 1、THREE.JS Scene Initialization
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
o implement Galacean Effects in THREE.JS, you need to first create a THREE.JS scene:
|
|
14
14
|
|
|
15
15
|
``` ts
|
|
16
16
|
import * as THREE from 'three';
|
|
17
17
|
|
|
18
|
-
//
|
|
18
|
+
// Create a renderer
|
|
19
19
|
const renderer = new THREE.WebGLRenderer({
|
|
20
20
|
alpha: true,
|
|
21
21
|
stencil: true,
|
|
@@ -23,11 +23,11 @@ const renderer = new THREE.WebGLRenderer({
|
|
|
23
23
|
depth: true,
|
|
24
24
|
premultipliedAlpha: true,
|
|
25
25
|
});
|
|
26
|
-
//
|
|
26
|
+
// Create a scene
|
|
27
27
|
const scene = new THREE.Scene();
|
|
28
28
|
const container = document.getElementById('J-container');
|
|
29
29
|
const { width, height } = container.getBoundingClientRect();
|
|
30
|
-
//
|
|
30
|
+
// Create a camera
|
|
31
31
|
const camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);
|
|
32
32
|
|
|
33
33
|
camera.position.set(0, 0, 8);
|
|
@@ -39,26 +39,26 @@ renderer.setSize(width, height);
|
|
|
39
39
|
container.appendChild(renderer.domElement);
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
### 2、ThreeDisplayObject
|
|
42
|
+
### 2、ThreeDisplayObject Instantiation and Resource Loading
|
|
43
43
|
|
|
44
44
|
``` ts
|
|
45
45
|
import { ThreeDisplayObject } from '@galacean/effects-threejs';
|
|
46
46
|
|
|
47
47
|
const displayObject = new ThreeDisplayObject(renderer.getContext(), { width, height });
|
|
48
|
-
//
|
|
48
|
+
// Load Galacean Effects output
|
|
49
49
|
await displayObject.loadScene('./xxx.json');
|
|
50
|
-
//
|
|
50
|
+
// Add the rendering object to the THREE scene
|
|
51
51
|
scene.add(displayObject);
|
|
52
52
|
```
|
|
53
53
|
|
|
54
|
-
### 3
|
|
54
|
+
### 3、Perform THREE.JS Renderingts
|
|
55
55
|
|
|
56
56
|
``` ts
|
|
57
57
|
const { currentComposition } = displayObject;
|
|
58
58
|
let lastTime = performance.now();
|
|
59
59
|
|
|
60
60
|
function render () {
|
|
61
|
-
//
|
|
61
|
+
// Check if the current composition has been destroyed
|
|
62
62
|
if (!currentComposition.isDestroyed) {
|
|
63
63
|
displayObject.update(performance.now() - lastTime);
|
|
64
64
|
}
|
|
@@ -72,6 +72,4 @@ function render () {
|
|
|
72
72
|
render();
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
-
## API
|
|
76
|
-
|
|
77
|
-
[Galacean Effects THREE.JS API 文档](https://galacean.antgroup.com/effects/#/api/modules_galacean_effects_threejs)
|
|
75
|
+
## [API Documentation](https://galacean.antgroup.com/effects/#/api/modules_galacean_effects_threejs)
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Description: Galacean Effects runtime threejs plugin for the web
|
|
4
4
|
* Author: Ant Group CO., Ltd.
|
|
5
5
|
* Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
|
|
6
|
-
* Version: v0.0.1-alpha.
|
|
6
|
+
* Version: v0.0.1-alpha.3
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
'use strict';
|
|
@@ -15282,7 +15282,7 @@ var SpriteGroup = /** @class */ (function () {
|
|
|
15282
15282
|
for (var i = startIndex; i <= endIndex; i++) {
|
|
15283
15283
|
var item = items[i];
|
|
15284
15284
|
// 不可见的元素跳过 不参与合并
|
|
15285
|
-
if (!init && (!item.
|
|
15285
|
+
if (!init && (!item.started || item.lifetime < 0)) {
|
|
15286
15286
|
continue;
|
|
15287
15287
|
}
|
|
15288
15288
|
if (!isSprite(item)) {
|
|
@@ -19487,6 +19487,10 @@ var CalculateVFXItem = /** @class */ (function (_super) {
|
|
|
19487
19487
|
CalculateVFXItem.prototype.setScale = function (x, y, z) {
|
|
19488
19488
|
this.content.startSize = [x, y, z];
|
|
19489
19489
|
};
|
|
19490
|
+
CalculateVFXItem.prototype.scale = function (x, y, z) {
|
|
19491
|
+
var startSize = this.content.startSize.slice();
|
|
19492
|
+
this.content.startSize = [x * startSize[0], y * startSize[1], z * startSize[2]];
|
|
19493
|
+
};
|
|
19490
19494
|
CalculateVFXItem.prototype.getHitTestParams = function (force) {
|
|
19491
19495
|
};
|
|
19492
19496
|
CalculateVFXItem.prototype.getRenderData = function () {
|
|
@@ -27550,9 +27554,9 @@ Geometry.create = function (engine, options) {
|
|
|
27550
27554
|
Mesh.create = function (engine, props) {
|
|
27551
27555
|
return new ThreeMesh(engine, props);
|
|
27552
27556
|
};
|
|
27553
|
-
var version = "0.0.1-alpha.
|
|
27557
|
+
var version = "0.0.1-alpha.3";
|
|
27554
27558
|
console.info({
|
|
27555
|
-
content: '[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.
|
|
27559
|
+
content: '[Galacean Effects THREEJS] version: ' + "0.0.1-alpha.3",
|
|
27556
27560
|
type: LOG_TYPE,
|
|
27557
27561
|
});
|
|
27558
27562
|
|