お世話になっております。
react-three-renderer
を利用してある図形を作りたいのですが、Three.js
などの描画を行う
ライブラリを使用した経験がなく、どのように作成すればいいのか分かりません。
下記に現在想定している実現項目を挙げていますので、
どの程度まで(またどのように)react-three-renderer
で対応できるかご教授お願い致します。
使用経験
React
単体でフロント画面が書ける、ライフサイクルが少し分かるThree.js
では図形を静的に表示したり、図形にライトを当てた経験がある
実現したい項目
-
Exampleのsmiley(笑顔のやつ)を回転させながら表示したい
-
上記のsmileyを画面に複数個、非同期で表示したい
-
回転させる際に枠をグラデーションさせながら回転させたい
-
具体例でいうとテクノウチさんの動画の (音が出ます!!)
左下の四角の様な動く図形を複数作りたい (あそこまで動きは複雑ではなくて、一定のリズムで)
念のため現時点のソース
js
1// circleGeometryを利用して取り合えず円形を回転させることができる 2constructor(props, context) { 3 super(props, context); 4 5 this.cameraPosition = new THREE.Vector3(0, 0, 5); 6 7 this.state = { 8 cubeRotation: new THREE.Euler(), 9 }; 10 11 this._onAnimate = () => { 12 13 this.setState({ 14 cubeRotation: new THREE.Euler( 15 this.state.cubeRotation.x + 0.1, 16 this.state.cubeRotation.y + 0.1, 17 0 18 ), 19 }); 20 }; 21 } 22 23 render() { 24 const width = window.innerWidth; 25 const height = window.innerHeight; 26 27 return (<React3 28 mainCamera="camera" 29 width={width} 30 height={height} 31 clearColor={new THREE.Color(0xffffff)} 32 onAnimate={this._onAnimate} 33 > 34 <scene> 35 <perspectiveCamera 36 name="camera" 37 fov={75} 38 aspect={width / height} 39 near={0.1} 40 far={1000} 41 42 position={this.cameraPosition} 43 /> 44 <mesh 45 rotation={this.state.cubeRotation} 46 > 47 <CircleGeometry 48 radius={1} 49 segments={32} 50 thetaStart={0} 51 thetaLength={6.3} 52 /> 53 <meshBasicMaterial 54 color={0x00ffff} 55 /> 56 </mesh> 57 </scene> 58 </React3 >); 59 }
今現在僕の知識ではとても対応できません故、とても投げやりな質問になってしまい申し訳ございません。
上記の実現項目をどのようにすれば実現出来るのでしょうか。
ご回答お願い致します。
バージョン
three
- 86react-three-renderer
- 3.2.4
あなたの回答
tips
プレビュー