From 209538b1f633a79ebb7f4ab1ba1eee4cc43f62d6 Mon Sep 17 00:00:00 2001 From: xiesi <305492881@qq.com> Date: Sun, 6 Jun 2021 00:14:42 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=BB=B6=E6=97=B6=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xiesi <305492881@qq.com> --- src/components/LoadFBX.vue | 186 ++++++++++++++++++------------------- 1 file changed, 92 insertions(+), 94 deletions(-) diff --git a/src/components/LoadFBX.vue b/src/components/LoadFBX.vue index 3fc1aab..93bdfa0 100644 --- a/src/components/LoadFBX.vue +++ b/src/components/LoadFBX.vue @@ -16,113 +16,111 @@ export default { return {}; }, mounted() { - setTimeout(() => { - console.log( - "mounted" + document.getElementById("fbxdiv") + this.fbxfilepath + console.log( + `mounted${document.getElementById("fbxdiv")}${this.fbxfilepath}` + ); + + const container = document.getElementById("fbxdiv"); + let camera, scene, renderer; + const clock = new THREE.Clock(); + let mixer; + + const mw = document.documentElement.clientWidth * 0.7; + const mh = document.documentElement.clientHeight; + console.log(mw + "," + mh); + + const init = () => { + camera = new THREE.PerspectiveCamera(45, mw / mh, 1, 2000); + camera.position.set(100, 200, 300); + + scene = new THREE.Scene(); + scene.background = new THREE.Color(0xa0a0a0); + + const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); + hemiLight.position.set(0, 200, 0); + scene.add(hemiLight); + + const dirLight = new THREE.DirectionalLight(0xffffff); + dirLight.position.set(0, 200, 100); + dirLight.castShadow = true; + dirLight.shadow.camera.top = 180; + dirLight.shadow.camera.bottom = -100; + dirLight.shadow.camera.left = -120; + dirLight.shadow.camera.right = 120; + scene.add(dirLight); + + // ground + const mesh = new THREE.Mesh( + new THREE.PlaneGeometry(2000, 2000), + new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }) ); + mesh.rotation.x = -Math.PI / 2; + mesh.receiveShadow = true; + scene.add(mesh); + + const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); + grid.material.opacity = 0.2; + grid.material.transparent = true; + scene.add(grid); + + // model + const loader = new FBXLoader(); + loader.load( + "http://localhost/myfbx.php?filepath=" + this.fbxfilepath, + function (object) { + mixer = new THREE.AnimationMixer(object); + + if (object.animations[0] != null) { + const action = mixer.clipAction(object.animations[0]); + action.play(); + } - const container = document.getElementById("fbxdiv"); - let camera, scene, renderer; - const clock = new THREE.Clock(); - let mixer; - - const mw = document.documentElement.clientWidth * 0.7; - const mh = document.documentElement.clientHeight; - console.log(mw + "," + mh); - - const init = () => { - camera = new THREE.PerspectiveCamera(45, mw / mh, 1, 2000); - camera.position.set(100, 200, 300); - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0xa0a0a0); - - const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444); - hemiLight.position.set(0, 200, 0); - scene.add(hemiLight); - - const dirLight = new THREE.DirectionalLight(0xffffff); - dirLight.position.set(0, 200, 100); - dirLight.castShadow = true; - dirLight.shadow.camera.top = 180; - dirLight.shadow.camera.bottom = -100; - dirLight.shadow.camera.left = -120; - dirLight.shadow.camera.right = 120; - scene.add(dirLight); - - // ground - const mesh = new THREE.Mesh( - new THREE.PlaneGeometry(2000, 2000), - new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }) - ); - mesh.rotation.x = -Math.PI / 2; - mesh.receiveShadow = true; - scene.add(mesh); - - const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000); - grid.material.opacity = 0.2; - grid.material.transparent = true; - scene.add(grid); - - // model - const loader = new FBXLoader(); - loader.load( - "http://localhost/myfbx.php?filepath=" + this.fbxfilepath, - function (object) { - mixer = new THREE.AnimationMixer(object); - - if (object.animations[0] != null) { - const action = mixer.clipAction(object.animations[0]); - action.play(); + object.traverse(function (child) { + if (child.isMesh) { + child.castShadow = true; + child.receiveShadow = true; } + }); - object.traverse(function (child) { - if (child.isMesh) { - child.castShadow = true; - child.receiveShadow = true; - } - }); - - scene.add(object); - } - ); + scene.add(object); + } + ); - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(mw, mh); + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(mw, mh); - renderer.shadowMap.enabled = true; - container.appendChild(renderer.domElement); + renderer.shadowMap.enabled = true; + container.appendChild(renderer.domElement); - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 100, 0); - controls.update(); + const controls = new OrbitControls(camera, renderer.domElement); + controls.target.set(0, 100, 0); + controls.update(); - window.addEventListener("resize", onWindowResize); + window.addEventListener("resize", onWindowResize); - // stats - //stats = new Stats(); - //container.appendChild(stats.dom); - }; + // stats + //stats = new Stats(); + //container.appendChild(stats.dom); + }; - const onWindowResize = () => { - camera.aspect = container.clientWidth / container.clientHeight; - camera.updateProjectionMatrix(); + const onWindowResize = () => { + camera.aspect = container.clientWidth / container.clientHeight; + camera.updateProjectionMatrix(); - renderer.setSize(container.clientWidth, container.clientHeight); - }; + renderer.setSize(container.clientWidth, container.clientHeight); + }; - const animate = () => { - requestAnimationFrame(animate); - const delta = clock.getDelta(); - if (mixer) mixer.update(delta); - renderer.render(scene, camera); - //stats.update(); - }; + const animate = () => { + requestAnimationFrame(animate); + const delta = clock.getDelta(); + if (mixer) mixer.update(delta); + renderer.render(scene, camera); + //stats.update(); + }; - init(); - animate(); - }, 1000); + init(); + animate(); }, methods: { hello() { -- GitLab