react-three-fbx-for-pyt

react-three-fbx-viewer

fbx viewer with three.js for react

Only render a fbx files

Install

npm install --save react-three-fbx-for-pyt

Usage

import React, { Component } from 'react';
import ReactThreeFbxViewer from 'react-three-fbx-for-pyt';

let fbxUrl = require('./asd.fbx');

export default class App extends Component {
  onLoad(e) {
    console.log(e);
  }

  onError(e) {
    console.log(e);
  }
  render () {
    let cameraPosition = {
      x:150,
      y:300,
      z:350
    }
    return (
      <div>
        <ReactThreeFbxViewer cameraPosition={cameraPosition} url={fbxUrl} onLoading={this.onLoad} onError={this.onError}/>
      </div>
    );
  }
}

Properties

inputs

param	description	type	default
url	url fbx to load	String	""
backgroundColor	color in hex 如果设置了alpha为true的话该值会失效	Hex	0x000000
alpha	是否设置背景透明	boolean	false
width	设置画布宽度	number	当前window的宽度
height	设置画布高度	number	当前window的高度
angle	angle of perspective camera in scene	number	45
near	near of perspective camera in scene	number	1
far	far of perspective camera in scene	number	2000
cameraPosition	camera position in scene	Object	{x: 2, y: 0, z: 10}
controlsPosition	control position in scene	Object	{x: 0, y: 0, z: 0}

In a future, you will can choice the lights (HemisphereLight,HemisphereLight,AmbientLight, ...)

inputs

event	description	return
onError	return an error	object error
onLoading	return an object with fbx is loading	object onloading

---

特别鸣谢

原作者@ https://github.com/kappys1/react-three-fbx-viewer