|
|
@@ -3,8 +3,8 @@ import * as THREE from "three"
|
|
|
import FbxFile from '../../../assets/3d/head-mast.fbx'
|
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
|
|
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
|
|
|
-import { HEADMAST_TYPE } from '../../../contants'
|
|
|
|
|
|
+// 创建文字
|
|
|
const createCanvasText = (text, color = '#ffffff') => {
|
|
|
const canvas = document.createElement('canvas')
|
|
|
const ctx: any = canvas.getContext('2d')
|
|
|
@@ -14,13 +14,10 @@ const createCanvasText = (text, color = '#ffffff') => {
|
|
|
return canvas
|
|
|
}
|
|
|
|
|
|
-const initThree:any = (spriteList: Array<any> = [], rootEle, setLoadProcess) => {
|
|
|
- // const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
|
|
|
+const initThree: any = (spriteList: Array<any> = [], rootEle, setLoadProcess) => {
|
|
|
// 已经存在场景
|
|
|
if (initThree.scene) {
|
|
|
- initThree.scene.children = initThree.scene.children.filter(item => {
|
|
|
- return ['AmbientLight', 'Group'].includes(item.type)
|
|
|
- })
|
|
|
+ initThree.scene.children = initThree.scene.children.filter(item => ['AmbientLight', 'Group'].includes(item.type))
|
|
|
// reload
|
|
|
AddSpriteList(initThree.scene, spriteList)
|
|
|
initThree.renderer.render(initThree.scene, initThree.camera);
|
|
|
@@ -32,31 +29,20 @@ const initThree:any = (spriteList: Array<any> = [], rootEle, setLoadProcess) =>
|
|
|
initThree.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
|
|
|
|
|
|
const { scene, camera, renderer } = initThree
|
|
|
- // const scene = new THREE.Scene()
|
|
|
- // const camera = new THREE.PerspectiveCamera(50, rootEle.clientWidth / rootEle.clientHeight, 1, 2000)
|
|
|
-
|
|
|
- // default xyz
|
|
|
+ // default camera position
|
|
|
const [x, y, z] = [-200, -115, 320]
|
|
|
camera.position.set(x, y, z)
|
|
|
- // const helper = new THREE.CameraHelper( camera )
|
|
|
- // scene.add( helper )
|
|
|
// 迪迦
|
|
|
const hemisphereLight = new THREE.AmbientLight(0xffffff, 1)
|
|
|
// hemisphereLight.position.set(0, 50, 60);
|
|
|
scene.add(hemisphereLight)
|
|
|
|
|
|
renderer.setClearColor(0x000000, 0);
|
|
|
- if (rootEle.childNodes[0]) {
|
|
|
- rootEle.replaceChild(renderer.domElement, rootEle.childNodes[0])
|
|
|
- } else {
|
|
|
- rootEle.appendChild(renderer.domElement)
|
|
|
- }
|
|
|
+ rootEle.appendChild(renderer.domElement)
|
|
|
renderer.setSize(rootEle.clientWidth, rootEle.clientHeight);
|
|
|
- // 加载fbx
|
|
|
+ // load fbx files
|
|
|
const loader = new FBXLoader()
|
|
|
loader.load(FbxFile, (fbx) => {
|
|
|
- // const axesHelper = new THREE.AxesHelper( 200 );
|
|
|
- // scene.add( axesHelper );
|
|
|
fbx.scale.set(0.05, 0.05, 0.05)
|
|
|
scene.add(fbx)
|
|
|
renderer.render(scene, camera)
|
|
|
@@ -66,7 +52,6 @@ const initThree:any = (spriteList: Array<any> = [], rootEle, setLoadProcess) =>
|
|
|
return setLoadProcess(process)
|
|
|
})
|
|
|
AddSpriteList(scene, spriteList)
|
|
|
- // renderer.render(scene, camera)
|
|
|
// add camera controller
|
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
controls.addEventListener("change", () => {
|
|
|
@@ -75,7 +60,7 @@ const initThree:any = (spriteList: Array<any> = [], rootEle, setLoadProcess) =>
|
|
|
}
|
|
|
|
|
|
const AddSpriteList = (scene, spriteList) => {
|
|
|
- spriteList.forEach((info, index) => {
|
|
|
+ spriteList.forEach((info) => {
|
|
|
const texture = new THREE.Texture(createCanvasText(info.text))
|
|
|
texture.needsUpdate = true
|
|
|
const spriteMaterial = new THREE.SpriteMaterial({map: texture})
|
|
|
@@ -98,9 +83,9 @@ interface ThreeComponentProps {
|
|
|
}
|
|
|
|
|
|
const ThreeComponent: React.FC<ThreeComponentProps> = (props) => {
|
|
|
- const [modelPosition, setModelPosition] = React.useState({ x: -200,y: -115,z: 320 })
|
|
|
+ // 加载进度
|
|
|
const [loadProcess, setLoadProcess] = React.useState(0)
|
|
|
-
|
|
|
+ // 渲染元素
|
|
|
const rootEle:any = document.getElementById('three-box')
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
@@ -151,22 +136,25 @@ const ThreeComponent: React.FC<ThreeComponentProps> = (props) => {
|
|
|
initThree(spriteList, rootEle, setLoadProcess)
|
|
|
}, [props.baseData.base])
|
|
|
|
|
|
- const LoadComponent = () => (
|
|
|
- <div className='load-process'>
|
|
|
- <div className='load-process-bar'>
|
|
|
- <div className='bar' style={{
|
|
|
- transform: `translate(${loadProcess}%, 0)`
|
|
|
- }}/>
|
|
|
+ const LoadComponent = () => {
|
|
|
+ // 刻度
|
|
|
+ const sign = [5, 25, 50, 75, 100].find(p => p >= loadProcess)
|
|
|
+ return (
|
|
|
+ <div className='load-process'>
|
|
|
+ <div className='load-process-bar'>
|
|
|
+ <div className={`bar process-${sign}`} style={{
|
|
|
+ width: `${loadProcess}%`
|
|
|
+ }}/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <React.Fragment>
|
|
|
+ { (loadProcess < 100) && LoadComponent() }
|
|
|
+ <div id="three-box"/>
|
|
|
+ </React.Fragment>
|
|
|
)
|
|
|
- return <React.Fragment>
|
|
|
- { (loadProcess < 100) && LoadComponent() }
|
|
|
- {/*<div>*/}
|
|
|
- {/* x: { modelPosition.x } y: { modelPosition.y } z: { modelPosition.z }*/}
|
|
|
- {/*</div>*/}
|
|
|
- <div id="three-box"/>
|
|
|
- </React.Fragment>
|
|
|
}
|
|
|
|
|
|
export default ThreeComponent
|
