Converting 2D pixel art into 3D coordinates with ThreeJS

Question

Converting 2D pixel art into 3D coordinates with ThreeJS

Attempting to display a cube generated in ThreeJS on an HTML canvas at a specific location has been quite challenging.

The location is defined in pixels, for example (100,200). Unfortunately, the process of converting these pixel values into ThreeJS coordinates remains elusive.

// Dimensions of my canvas are 640 X 480
const CANVAS_WIDTH = 640;
const CANVAS_HEIGHT = 480;

// Create a cube and add it to the scene
let geometry = new THREE.CubeGeometry(1, 1, 1);
let materials = createMaterials();
this.cube = new THREE.Mesh(geometry, materials);
this.cube.doubleSided = true;
this.scene.add(this.cube);

// Set up the camera
this.camera = new THREE.PerspectiveCamera(45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 5000);
this.camera.position.z = CANVAS_WIDTH / 2;
this.scene.add(this.camera);

An interesting discovery was made that the origin (0,0) in ThreeJS corresponds to the center of the screen.

If anyone has insights on how to translate 2D coordinates from the canvas into 3D coordinates compatible with ThreeJS, kindly share your knowledge. Any assistance would be greatly appreciated.

javascript three.js 3d

Answer 1

Answer №1

Here's a method you can consider, utilizing the THREE.Raycaster():

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 box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
scene.add(box);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

document.addEventListener("mousedown", onMouseDown);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  var dist = box.position.clone().sub(camera.position).length();

  raycaster.ray.at(dist, box.position);

}


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Another approach is to utilize a raycaster and THREE.Plane(), determining the intersection point of the raycaster's ray with the plane.

Answer 2

Here's a method you can consider, utilizing the THREE.Raycaster():

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 box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
scene.add(box);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

document.addEventListener("mousedown", onMouseDown);

function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  var dist = box.position.clone().sub(camera.position).length();

  raycaster.ray.at(dist, box.position);

}


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Another approach is to utilize a raycaster and THREE.Plane(), determining the intersection point of the raycaster's ray with the plane.

Answer 3

Answer №2

Initially, when working with a three.js scene, it's important to remember that it renders in 3D, meaning that your object's position should have coordinates in all three dimensions (X, Y, Z) within the scene. To adjust the position of your object, you can use the following code:

Object.position.set( x , y , z );

. The z position specifically determines how close or far the object is from the camera. Best of luck! Remember to set the z value to 0 if you want to place your object at specific coordinates (x, y, 0).

Answer 4

Initially, when working with a three.js scene, it's important to remember that it renders in 3D, meaning that your object's position should have coordinates in all three dimensions (X, Y, Z) within the scene. To adjust the position of your object, you can use the following code:

Object.position.set( x , y , z );

. The z position specifically determines how close or far the object is from the camera. Best of luck! Remember to set the z value to 0 if you want to place your object at specific coordinates (x, y, 0).

Converting 2D pixel art into 3D coordinates with ThreeJS

Answer №1

Answer №2

Similar questions

Tips for releasing a dual npm package with both CommonJS and module support to ensure consistent imports of submodules

Exploring elements within a JavaScript array

What is the procedure for adding a URL path in jQuery?

Learn how to send information to a form and receive a response when a key is pressed, either up or down, by

Using Typescript, Angular, and Rxjs to retrieve multiple HttpClients

Tips for testing nested HTTP calls in unit tests

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Trouble resolving a timer interruption in JavaScript

Issues occurred when attempting to access information with postgres and nodeJS

Passing state to getStaticProps in Next JSLearn how to effectively pass state

Exploring the world of design with React JS and MUI's diverse styling options

Always display all options in MUI Autocomplete without any filtering

Unable to locate the element within a component using Cypress

I am in the process of transforming my basic JS Array into one that contains key/value

dart, setting the root directory for web application

Ways to resolve - Error: Unable to access 'comments' property of null

The architecture of Angular controllers

The functionality of React-router-dom protected routes seems to be malfunctioning

In Angular, when a promise returns an "undefined" value, how does this interact with .NET

Accessing S3 bucket contents in Angular using Observables