來做扁額吧
import * as THREE from 'three'
import { useLayoutEffect } from 'react'
import { Canvas, applyProps } from '@react-three/fiber'
import { AccumulativeShadows, RandomizedLight, OrbitControls, Environment, useGLTF } from '@react-three/drei'
import { FlakesTexture } from 'three-stdlib'
export default function GoldenText(props) {
const { scene, materials } = useGLTF('/元藥堂.gltf')
// const { scene, materials } = useGLTF('https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/suzanne-high-poly/model.gltf')
useLayoutEffect(() => {
scene.traverse((obj) => obj.isMesh && (obj.receiveShadow = obj.castShadow = true))
applyProps(materials.Golden, {
color: 'orange',
roughness: 0,
normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
'normalMap-repeat': [40, 40],
normalScale: [0.05, 0.05]
})
applyProps(materials.TexTboxBase, {
color: '#1C1F1E',
roughness: 0,
normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
'normalMap-repeat': [40, 40],
normalScale: [0.05, 0.05]
})
// applyProps(materials.insideBase, {
// color: 'FFBD33',
// roughness: 0,
// normalMap: new THREE.CanvasTexture(new FlakesTexture(), THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping),
// 'normalMap-repeat': [40, 40],
// normalScale: [0.05, 0.05]
// })
})
return <primitive object={scene} {...props} />
}
DEMO : https://codesandbox.io/s/jin-se-pai-bian-hou-chu-li-xgml19