Skip to content

M
Model_Library_Front_End

谢斯 / Model_Library_Front_End

通知 2
Star 0
Fork 0
M
Model_Library_Front_End

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 209538b1 编写于 作者: X xiesi
浏览文件
操作

修改延时问题 

Signed-off-by: Nxiesi <305492881@qq.com>
上级 cc8c3e95
隐藏空白更改
内联 并排
Showing with 92 addition and 94 deletion
src/components/LoadFBX.vue
浏览文件 @ 209538b1
...@@ -16,113 +16,111 @@ export default { ...@@ -16,113 +16,111 @@ export default {
return {}; return {};
}, },
mounted() { mounted() {
setTimeout(() => { console.log(
console.log( `mounted${document.getElementById("fbxdiv")}${this.fbxfilepath}`
"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"); object.traverse(function (child) {
let camera, scene, renderer; if (child.isMesh) {
const clock = new THREE.Clock(); child.castShadow = true;
let mixer; child.receiveShadow = true;
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) { scene.add(object);
if (child.isMesh) { }
child.castShadow = true; );
child.receiveShadow = true;
}
});
scene.add(object);
}
);
renderer = new THREE.WebGLRenderer({ antialias: true }); renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(mw, mh); renderer.setSize(mw, mh);
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 100, 0); controls.target.set(0, 100, 0);
controls.update(); controls.update();
window.addEventListener("resize", onWindowResize); window.addEventListener("resize", onWindowResize);
// stats // stats
//stats = new Stats(); //stats = new Stats();
//container.appendChild(stats.dom); //container.appendChild(stats.dom);
}; };
const onWindowResize = () => { const onWindowResize = () => {
camera.aspect = container.clientWidth / container.clientHeight; camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight); renderer.setSize(container.clientWidth, container.clientHeight);
}; };
const animate = () => { const animate = () => {
requestAnimationFrame(animate); requestAnimationFrame(animate);
const delta = clock.getDelta(); const delta = clock.getDelta();
if (mixer) mixer.update(delta); if (mixer) mixer.update(delta);
renderer.render(scene, camera); renderer.render(scene, camera);
//stats.update(); //stats.update();
}; };
init(); init();
animate(); animate();
}, 1000);
}, },
methods: { methods: {
hello() { hello() {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或