@galacean/effects-threejs 0.0.0-experimental-downgrade624-20240904

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2019-present Ant Group Co., Ltd. https://www.antgroup.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# Galacean Effects THREE.JS Plugin
+
+With this plugin, you can load and render Galacean Effects animations within the THREE.JS environment.
+
+## Version Information
+
+- Three.js ![](https://img.shields.io/badge/npm-0.149.0-green.svg?style=flat-square)
+
+## Usage
+
+### 1、THREE.JS Scene Initialization
+
+o implement Galacean Effects in THREE.JS, you need to first create a THREE.JS scene:
+
+``` ts
+import * as THREE from 'three';
+
+// Create a renderer
+const renderer = new THREE.WebGLRenderer({
+  alpha: true,
+  stencil: true,
+  antialias: true,
+  depth: true,
+  premultipliedAlpha: true,
+});
+// Create a scene
+const scene = new THREE.Scene();
+const container = document.getElementById('J-container');
+const { width, height } = container.getBoundingClientRect();
+// Create a camera
+const camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);
+
+camera.position.set(0, 0, 8);
+camera.lookAt(0, 0, 0);
+scene.add(camera);
+renderer.setPixelRatio(window.devicePixelRatio);
+renderer.setSize(width, height);
+
+container.appendChild(renderer.domElement);
+```
+
+### 2、ThreeDisplayObject Instantiation and Resource Loading
+
+``` ts
+import { ThreeDisplayObject } from '@galacean/effects-threejs';
+
+const displayObject = new ThreeDisplayObject(renderer.getContext(), { width, height });
+// Load Galacean Effects output
+await displayObject.loadScene('./xxx.json');
+// Add the rendering object to the THREE scene
+scene.add(displayObject);
+```
+
+### 3、Perform THREE.JS Renderingts
+
+``` ts
+const { currentComposition } = displayObject;
+let lastTime = performance.now();
+
+function render () {
+  // Check if the current composition has been destroyed
+  if (!currentComposition.isDestroyed) {
+    displayObject.update(performance.now() - lastTime);
+  }
+
+  lastTime = performance.now();
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(render);
+}
+
+render();
+```
+
+## [API Documentation](https://galacean.antgroup.com/effects/#/api/modules_galacean_effects_threejs)

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from '@galacean/effects-core';
+export * from './three-display-object';
+export * from './three-texture';
+export * from './material';
+export * from './three-composition';
+export declare const version: string;