After numerous attempts, I finally resorted to seeking help as I struggle to draw a 3D rectangle using my mouse.
Fortunately, I successfully created a resizable rectangle by manipulating the vertices.
If you need a plain HTML version, here it is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>RSCEDIT - Test</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
display: block;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<canvas id="main"></canvas>
</div>
<script src="https://rscedit.io/assets/client/js/core/libraries/jquery.min.js"></script>
<script type="text/javascript" src="https://rscedit.io/assets/client/js/threejs/three.min.js"></script>
<script type="text/javascript" src="https://rscedit.io/assets/client/js/threejs/Detector.js"></script>
<script type="text/javascript" src="https://rscedit.io/assets/client/js/threejs/controls/OrbitControls.js"></script>
<script type="text/javascript" src="https://rscedit.io/assets/client/js/threejs/Projector.js"></script>
<script type="text/javascript" src="https://rscedit.io/assets/client/js/threejs/dat.gui.min.js"></script>
<script>
// JavaScript code here
</script>
</body>
</html>
Any assistance on the following issues would be greatly appreciated:
- The rectangle doesn't align itself with my mouse when I start dragging
- The rectangle resizes in the incorrect direction (adjustment needed when rotating the camera)
Here is the jsfiddle link for reference: https://jsfiddle.net/bgzrcx46/7/
Thanks in advance for your help!