reactコンポーネント化3 dモデルビューア

react-3d-viewer
reactベースjsのコンポーネント化3 dモデル表示ツール.メモを押してくださいgithub.io/react-3d-vi…

github github.com/dwqdaiwenqi…

とくせい

アセンブリ化

.setState()メソッド更新UI

gltf、obj、mtl、json、daeモデルフォーマットをサポート-その他のフォーマット以降

をサポート

は、およびのコンポーネントを提供する-他のライトコンポーネントは、その後、

を提供する.
使用
npmまたはcdnからreact-3 d-viewerを取得

npm i react-3d-viewer

unpkg.com/react-3d-vi…

Commonjs

import {OBJModel} from 'react-3d-viewer'

render(){
  return(
    <div>
      <OBJModel src="./a.obj"/>
    div>
  )
}

import {Tick,MTLModel} from 'react-3d-viewer'

render(){
  return(
    <div>
     <MTLModel 
        enableZoom = {false}
        position={{x:0,y:-100,z:0}}
        rotation={this.state.rotation}
        mtl="./src/lib/model/freedom.mtl"
        src="./src/lib/model/freedom.obj"
     />
    div>
  )
}
componentWillMount(){
    this.tick.animate = false
}
componentDidMount(){
  this.tick = Tick(()=>{
    var {rotation} = this.state
    rotation.y += 0.005
    this.setState({rotation})

  })
}

HTML

<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/main.js">script>
<script src="https://unpkg.com/react@latest/umd/react.production.min.js">script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js">script>
<div id="example">div>
<script >
  //   ，     。。。
  ReactDOM.render(
  React.createElement('div',{ style: { width: 600, margin: '0px auto' } },
  React.createElement(React3DViewer.JSONModel, {src:'./src/lib/model/kapool.js'})
  )
  ,document.getElementById('example'));
script>

もっとDemo、ここ
ツールバーの
属性名
を選択します.
デフォルト
説明
width
number
500
容器の幅
height
number
500
容器の高さ
onLoad
function
undefined
関数のロードが完了したら呼び出す
onProgress
function
undefined
関数のロード中に呼び出す
enableKeys
boolen
true
キーボードコントロールの有効化または無効化
enableRotate
boolen
true
カメラの水平方向と垂直方向の回転を有効または無効にする
enableZoom
boolen
true
カメラのズームオン/オフ
enabled
boolen
true
コントロール全体を有効または無効にする
src
string
undefined
ファイルのパス
mtl
string
undefined
.mtlファイルのパス
anitialias
boolen
true
アンチエイリアシングを有効にするかどうか
position
object
{x:0,y:0,z:0}
オブジェクトの座標
rotation
object
{x:0,y:0,z:0}
オブジェクトの回転
どのように働くかコンポーネントは、カメラ、シーン、ライト、およびWebGLレンダラーを作成します.ビューポートを満たすDOMノード(要素)をドキュメントに追加します.内部sceneはリアルタイムでレンダリングされ、componentDidUpdateでpropsを検出し、オブジェクトのプロパティを変更します.
License
MIT