Create artwork in Three.js by clicking the mouse, with the drawings remaining in line with the orientation of

Question

Create artwork in Three.js by clicking the mouse, with the drawings remaining in line with the orientation of

I am struggling to figure out the best way to achieve this. While raycasting seems effective in finding points that intersect with objects, I simply want to translate 2D mouse coordinates to a 3D point where the mouse clicks, regardless of scale, rotation, or any objects present.

One idea I considered but have not yet implemented involves creating an invisible plane parallel to the camera, always upright and intersecting the y axis. Then, using a raycaster to hit the plane, draw accordingly, and then remove the plane. However, this method feels inefficient.

Currently, I have a method that works relatively well but encounters issues when the line moves away from the origin or the camera is zoomed.

In the image provided, two lines are drawn from different perspectives. The vertical line shows what happens when the camera aligns with the x and z axes, while the horizontal line demonstrates the result when the camera faces downward. https://i.sstatic.net/MBuhf.png

It appears that the calculation relies on the distance to the camera, resulting in distortion as the line moves farther away. How can this distortion be eliminated?

Source: https://github.com/AskAlice/mandala-3d-threejs Live demo:

Below is the relevant code snippet:

js/content.js@112

function get3dPointZAxis(event)
{
    camPos = camera.position;
    var mv = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY/window.innerHeight) * 2 + 1, 1).unproject(camera);
    var m2 = new THREE.Vector3(0,0,0);
    var pos = camPos.clone(); 
    pos.add(mv.sub(camPos).normalize().multiplyScalar(m2.distanceTo(camPos)));
    return pos;
}

This function was developed based on information from two Stack Overflow posts, but it still has the mentioned issues.

Initially, I referred to this post for drawing and converting to the z-axis in a flat manner, though implementing it in three dimensions proved challenging:

How to draw a line segment at run time using three.js

Subsequently, I utilized details from another post to align the object parallel to the camera on the x-z axis like so: https://i.sstatic.net/5mSmb.png

Moving objects parallel to projection plane in three.js

javascript 3d three.js raycasting

Answer 1

Answer №1

When using both THREE.Plane() and

THREE.Raycaster().ray.intersectPlane()

, this option allows you to:

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var point = new THREE.Vector3();

function getPoint(event){
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  planeNormal.copy(camera.position).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, scene.position);
  raycaster.setFromCamera(mouse, camera);
  raycaster.ray.intersectPlane(plane, point);
}

To see this in action, run the code snippet, check the "draw" checkbox, move your mouse without clicking, uncheck the checkbox, then rotate the scene while holding down the mouse. All points will lie on the same plane.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var point = new THREE.Vector3();

document.addEventListener("mousedown", onMouseDown, false);
document.addEventListener("mousemove", onMouseMove, false);

function getPoint(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  planeNormal.copy(camera.position).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, scene.position);
  raycaster.setFromCamera(mouse, camera);
  raycaster.ray.intersectPlane(plane, point);
}

function setPoint() {
  var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(.125, 4, 2), new THREE.MeshBasicMaterial({
    color: "yellow",
    wireframe: true
  }));
  sphere.position.copy(point);
  scene.add(sphere);
}

function onMouseDown(event) {
  getPoint(event);
  if (draw.checked) setPoint();
}

function onMouseMove(event) {
  getPoint(event);
  if (draw.checked) setPoint();
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div style="position:absolute;">
  <input id="draw" type="checkbox">
  <label for="draw" style="color: white;">draw</label>
</div>

Answer 2

When using both THREE.Plane() and

THREE.Raycaster().ray.intersectPlane()

, this option allows you to:

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var point = new THREE.Vector3();

function getPoint(event){
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  planeNormal.copy(camera.position).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, scene.position);
  raycaster.setFromCamera(mouse, camera);
  raycaster.ray.intersectPlane(plane, point);
}

To see this in action, run the code snippet, check the "draw" checkbox, move your mouse without clicking, uncheck the checkbox, then rotate the scene while holding down the mouse. All points will lie on the same plane.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var point = new THREE.Vector3();

document.addEventListener("mousedown", onMouseDown, false);
document.addEventListener("mousemove", onMouseMove, false);

function getPoint(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  planeNormal.copy(camera.position).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, scene.position);
  raycaster.setFromCamera(mouse, camera);
  raycaster.ray.intersectPlane(plane, point);
}

function setPoint() {
  var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(.125, 4, 2), new THREE.MeshBasicMaterial({
    color: "yellow",
    wireframe: true
  }));
  sphere.position.copy(point);
  scene.add(sphere);
}

function onMouseDown(event) {
  getPoint(event);
  if (draw.checked) setPoint();
}

function onMouseMove(event) {
  getPoint(event);
  if (draw.checked) setPoint();
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div style="position:absolute;">
  <input id="draw" type="checkbox">
  <label for="draw" style="color: white;">draw</label>
</div>

Create artwork in Three.js by clicking the mouse, with the drawings remaining in line with the orientation of

Answer №1

Similar questions

scrolling through a list using .slice choosing an excessive amount of items

I want the navigation bar to appear only upon scrolling, but when I refresh the page it is already visible, and then vanishes as I start scrolling

Exploring an unusual HTML structure using Python's Beautiful Soup and urllib for web scraping

Tips for making an input field that overlays text

Incorporating a JSON file through a script element

Is it possible to detect the source of a digest cycle in AngularJS?

Next.js experiencing development server compile errors and broken page routing in production builds

Unable to execute node in vscode terminal

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

Dispatching actions in `componentDidMount` is restricted in Redux

Why is the `node-config` configuration undefined within a TypeScript Jest environment?

Escaping double quotes in dynamic string content in Javascript can prevent unexpected identifier errors

Creating a JSON object from text using JavaScript is a straightforward process

"Capturing the essence of the web: Explore the

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Identifying the class name of SVGAnimatedString

Take action once the Promise outside of the then block has been successfully completed

I'm struggling to make the jquery parentsUntil function work properly

Retrieve the specific data from the database when the <tr> element is hovered over

maintain ajax history during jquery redirection