threejs cannot be found - javascript

Hi I am trying to build the "get started" application from the threejs website. https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene
I made a html like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script>"/js/three.min.js"</script>
<script type="module" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>
I specified my view.js as a module since I want to be able to use the import statement to import my typescript files, but when I try to show my application in the browser I get the message THREE not found.
I tried adding it with yarn but it does not work.
This is my structure


Your three.min.js file is wrongly included. Your HTML should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>BIM Demo</title>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
</head>
<body>
<h1>BIM DEMO</h1>
</body>
</html>

Related

How do I source files on a custom html tag?

I am trying to create my own computer language but can't get the src attribute to work. Is there a way to get the source code to "paste" to the inner text of the element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h1 id="p"></h1>
<space-lang src="Testing.txt">
</space-lang>
</head>
<body>
<script src="space.js">
</script>
</body>
</html>

how to create webpack multi page app with single core

hi recently I was working on SPA but for SEO purposes i decided to change my app to a multi-web page app (that they are SPA) and the core.js is identical between all pages and main.js file will drive my core.js and drow somthing in browser
i want my dist folder be like this picture
and my index.html (home page) be like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mori</title>
</head>
<body>
<h1>this is from main page</h1>
tutorial
<script src="/core.js"></script>
<script src="/main.js"></script>
</body>
</html>
and all other view fllow same pattren
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tutorial</title>
</head>
<body>
<h1>this is for tutorial page</h1>
main page
<script src="/core.js"></script>
<script src="/tutorial/main.js"></script>
</body>
</html>

Remove webfont.js as render-blocking resource - lighthouse

I'm currently trying to optimize my site and load font family asynchronously
At first it was an issue with material icons like in image below
After getting rid of this issue by using webfontloader in index.html I now have this error, which hasn't been as easy to get rid of
To try and solve it I changed the CDN link <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> to webfont.js to using npm i webfontloader and loading it locally, but the issue is still there. How can I get webfont.js to not be render-blocking?
index.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<title>My App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/logo.ico">
<script src="../node_modules/webfontloader/src/core/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Material+Icons']
}
});
</script>
</head>
<body>
<app-root>
</app-root>
</body>
</html>

How to render markdown in ejs page

i want to create small blog using express , ejs and markdown but when i tried to load markdown on page i saw this:
my code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<%=title%> <%=body%>
</body>
</html>

It is simple you have to change your tags to <%- yourVar%>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<%-title%> <%-body%>
</body>
</html>

Image is not displayed in print preview

I am learning print.js, but I am having trouble printing the image. I tried to called printJS but the image is not displayed in the print preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"/>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<title>Document</title>
</head>
<body>
<image src="test-01.jpg"/>
<button type="button" onclick="printJS('test-01.jpg','image')">
Print
</button>
</body>
</html>

Categories