I have a beautiful turquoise diamond and I want to incorporate a directional camera view in the background of a WordPress section. However, I am unsure how to achieve this.
The issue I'm facing is that I created a wireframe over the diamond, but when I try to attach 3D spheres at each intersection of lines, it doesn't seem to work. I've read the wireframe mesh page in three.js but nothing seems to be moving. What could I possibly be doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Amba</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- CSS Styles -->
<style>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}
a {
color: #ff0;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button {
cursor: pointer;
text-transform: uppercase;
}
/* Additional styles... */
</style>
</head>
<body>
<!-- JavaScript Code Including Three.js Library -->
</body>
</html>I apologize for not including CDNs as they don't appear to work properly. I am currently working on this project within the three.js examples folder.
Here is my reference image for the desired shape: https://i.sstatic.net/LCWX8.png
And here is the expected end result at each corner: https://i.sstatic.net/7zPbs.png