@galacean/mars-threejs NPM

Mars 的 THREE.JS 插件

使用此插件，可以在 THREE.JS 环境下加载并渲染 Mars 动效。

版本说明

Three.js

使用步骤

1、THREE.JS 场景初始化

在 THREE.JS 中实现 Mars 首先要创建一个 THREE.JS 场景：

import * as THREE from 'three';

// 创建一个 renderer
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  stencil: true,
  antialias: true,
  depth: true,
  premultipliedAlpha: true,
});
// 创建一个场景
const scene = new THREE.Scene();
const container = document.getElementById('J-container');
const { width, height } = container.getBoundingClientRect();
// 创建一个相机
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 实例化和资源加载

import { ThreeDisplayObject } from '@galacean/mars-threejs';

const displayObject = new ThreeDisplayObject(renderer.getContext(), { width, height });
// 加载 Mars 产物
await displayObject.loadScene('./xxx.json');
// 将绘制对象添加到 THREE 的 scene 中
scene.add(displayObject);

3、执行 THREE.JS 渲染

const { currentComposition } = displayObject;
let lastTime = performance.now();

function render () {
  // 判断当前合成是否被销毁
  if (!currentComposition.isDestroyed) {
    displayObject.update(performance.now() - lastTime);
  }

  lastTime = performance.now();
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

render();