🦁
React+TypeScriptなWebアプリで、R3Fのtutorial17。(Environmentで簡単背景描画)
Abstract
今回の参考はここ(Environment)。
Environmentを使うと簡単に表示できる。
結論
今回の成果物はココ↓
背景に、森林("forest")を設定する。簡単説明 :
- まず、importする。
import
import { Environment } from '@react-three/drei'
- あとは、呼び出すだけ
import
<Environment preset="forest" background />
前提
- React+Typescriptの開発環境は構築済 Ubuntu22.04+VSCode+React+TypeScriptの開発環境を構築してみた。
- このスケルトンコードから始める。react-r3f-tutorial015
手順
1.プロジェクト生成 -> VSCodeで開く
めんどいから、このスケルトンコードから始める。react-r3f-tutorial015
で、下記コマンドでフォルダ名とか整備する。
フォルダリネームとか
$ BaseProject=react-r3f-tutorial015
$ NewProject=react-r3f-tutorial017
$ cd ~
$ rm -rf ${BaseProject}
$ git clone https://github.com/aaaa1597/${BaseProject}.git
$ rm -rf ${BaseProject}/.git
$ mv ${BaseProject} ${NewProject}
$ cd ${NewProject}
準備
$ npm install --save three
$ npm install --save @types/three
$ npm install --save @react-three/fiber
$ npm install --save @react-three/drei
$ npm install --save-dev leva
App.tsx
まず全体。
App.tsx
import React, {useRef} from 'react';
import './App.css';
import { Canvas, useFrame, MeshProps, useLoader } from '@react-three/fiber'
import * as THREE from 'three'
-import { Stats, OrbitControls } from '@react-three/drei'
+import { Stats, OrbitControls, Environment } from '@react-three/drei'import { useControls } from 'leva'
const Lights = () => {
const directionalRef = useRef<THREE.DirectionalLight>(null!)
useControls('Directional Light', {
intensity: {
value: 1, min: 0, max: 5, step: 0.1,
onChange: (v) => {
directionalRef.current.intensity = v
},
},
position: {
value: [3.3,1.0,4.4],
onChange: (v) => {
directionalRef.current.position.x = v[0]
directionalRef.current.position.y = v[1]
directionalRef.current.position.z = v[2]
},
},
})
return (
<directionalLight ref={directionalRef} castShadow />
)
}
type BoxProps = {
props: MeshProps;
wireframe?: boolean;
}
const Box = (boxprops: BoxProps) => {
const ref = useRef<THREE.Mesh>(null!)
useFrame((_, delta) => {
if( !ref.current) return
ref.current.rotation.x += 1 * delta
ref.current.rotation.y += 0.5 * delta
})
return (
<mesh {...boxprops.props} ref={ref}>
<boxGeometry />
</mesh>
)
}
const Floor = () => {
return (
<mesh rotation-x={-Math.PI / 2} receiveShadow={true}>
<circleGeometry args={[10]} />
<meshStandardMaterial />
</mesh>
)
}
const App = () => {
const texture = useLoader(THREE.TextureLoader, './imgs/grid.png')
return (
<div style={{ width: "75vw", height: "75vh" }}>
<Canvas camera={{ position: [4, 4, 3] }} shadows>
<Lights />
+ <Environment preset="forest" background />
<Box props={{position:[3, 1, 0], name:"meshBasicMaterial", material: new THREE.MeshBasicMaterial({ map: texture })}}/>
<Box props={{position:[1, 1, 0], name:"meshNormalMaterial", material: new THREE.MeshNormalMaterial({flatShading: true,})}}/>
<Box props={{position:[1, 3, 0], name:"meshPhongMaterial", material: new THREE.MeshPhongMaterial({flatShading: true, map: texture,})}}/>
<Box props={{position:[3, 3, 0], name:"MeshStandardMaterial", material: new THREE.MeshStandardMaterial({flatShading: true, map: texture,})}}/>
<Floor />
<OrbitControls />
<axesHelper args={[5]} />
<gridHelper />
<Stats />
</Canvas>
</div>
);
}
export default App;
で、実行。
出来た!!
ポイント
Environmentを埋め込むだけ。ものすごい簡単だった!!
自前の背景を埋め込みたい時は、下記を実行する。
Environment
<Environment files="./img/venice_sunset_1k.hdr" background />
React+TypeScriptなWebアプリで、R3Fのtutorial16。(GLTFloaderで3Dモデル表示)
Discussion