I am following the steps of Building A Basic Application, and it comes to 3. Hello, Web Viewer.
I am trying to show the microengine.scs in the WebViewer but it failed and this is the debug console information
Hi @qitian.ye could you upload the code that you have written so far? Maybe I can replicate the problem that you are having on my end.
Thanks very much.
I just tried to send the files to you, but the mail administrator blocked my attachments and took the entire mail.
Since Iâm new in the forum so I canât add file in this reply.
The link below comes from Baidu Netdisk, I hope it is available for you.
Linkďźhttps://pan.baidu.com/s/1RG5wKxmNOwfVClgGndZKAQ extract codeďźjyw4
If you can not download it, please tell me a way to send file to you
And this is the code in âindex.htmlâ
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Viewer</title>
<style type="text/css">
#viewer {
width: 1024px;
height: 720px;
position: relative;
outline: 1px solid black;
}
</style>
<script type="text/javascript" src="js/hoops/hoops_web_viewer.js"></script>
<script type="text/javascript">
window.onload = () => {
hwv = new Communicator.WebViewer({
containerId: "viewer",
endpointUri: "data/microengine.scs"
});
hwv.start();
}
</script>
</head>
<body>
<h3>Web Viewer Minimal Example</h3>
<div id="viewer"></div>
</body>
</html>
Hey @qitian.ye â
I updated your permissions, you should be able to attach files now if needed, but your link seems to work for me.
Hi @qitian.ye could you send your project via this website: https://transfer.techsoft3d.com/
You will need to create an account for yourself.
Preferably send your project as a .zip file if you can.
Once your file is uploaded please copy the link and paste it in the chat.
Once I have it, I will try to reproduce the issue that you are having. Hopefully we can get this figured out!
Thanks very much ! This is helpful.
Thatâs great, I upload file to the link below:
https://transfer.techsoft3d.com/link/t5CyEJR7m46FsHqZMD1RbE
Hey @qitian.ye,
I was able to replicate your issue on my end. The issue only existed when trying to run the project within VSCode. Instead of debugging in VSCode, try the following:
After you start the HOOPS Server by double clicking the start_server.bat file in the file explorer, right-click on the index.html file within the file explorer and open this file with your favorite browser. This should allow your project to operate correctly.
@qitian.ye if you would like to debug using VSCode you may need to install the live server extension and run the viewer through that. You will then need to add a configuration to the debugger to use that live server url. Below is the configuration file of one of the engineers at Tech Soft 3D:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: Debugging in Visual Studio Code
âversionâ: â0.2.0â,
âconfigurationsâ: [
{
ânameâ: âLaunch Chromeâ,
ârequestâ: âlaunchâ,
âtypeâ: âpwa-chromeâ,
âurlâ: âhttp://127.0.0.1:5500/hoops_web_viewer_sample.htmlâ,
âwebRootâ: â${workspaceFolder}â
},
]
}
Here is also a link that you may find useful: Debugging in Visual Studio Code
Thanks Ricky. Due to the Spring Festival and other events, I stopped tracking this problem last two weeks.
I was inspired by your answer above and it turned out that the problem was my own mistake.
To make sure the files are backed up, I copied a new basic_app directory and renamed it as âbasic_app_testâ(this is my working dirctory). But the name conflicts with âfileServerStaticDirsâ value in server_config.js setting file (my guess) and causes the model to fail to be loaded.
I reset the name of the directory to basic_app, and start with http://localhost:11180/index.html , problem has been solved finally.
I think it was because I didnât follow the procedure 100% that caused the problem.
So perhaps the final conclusion is, do not modify or move the project directory unless you have made sure that other relevant settings have been synchronized before doing so.
Thank you very much for your thoughtful support.
Your answer is also very useful to me. I donât have much experience with VS Code, and this problem is bound to come up sooner or later.
I added the configuration file according to the steps you said, but the error message still exists, so the problem may still be what I said above
@qitian.ye great to hear that this helped. Good luck with your future projects!
Iâm facing the exactly same issue how can I solve this.
I created data directory and copy pasted microengine.scs model still Iâm getting blank screen.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Viewer</title>
<style type="text/css">
#viewer{
width: 640px;
height: 480px;
position: relative;
outline: 1px solid black;
}
</style>
<script type="text/javascript" src="js/hoops/hoops_web_viewer.js"></script>
<script type="text/javascript" >
window.onload = () =>{
hwv = new Communicator.WebViewer({
containerId:"viewer",
endPointUri:"data/microengine.scs"
});
hwv.start();
}
</script>
</head>
<body>
<h3>Web Viewer Minimal Example</h3>
<div id="viewer"></div>
</body>
</html>
I followed the tutorial and not even change folder name but in CMD I get this warning
Configuration optional setting 'fileServerAccessControlAllowOriginHeader' is undefined. Recommend adding with the default value.