Placing a three-dimensional object in the corners of the canvas using three.js

Question

Placing a three-dimensional object in the corners of the canvas using three.js

I'm trying to position a 3D object in either corner of my canvas automatically, regardless of its size.
https://i.sstatic.net/IWgr1.png

After finding a solution on stackoverflow:

I implemented the following code for my object:

mesh.position.set(-(window.innerWidth), (window.innerHeight), 0)

This resulted in only part of the object being visible, like this:
https://i.sstatic.net/jKrJM.png

I want the object to be fully visible and positioned consistently across different canvas sizes, especially for mobile use, like this:
https://i.sstatic.net/vv8lT.png

I have also included an example of my setup here: https://jsfiddle.net/w9914420/dez9k31m/

If anyone can provide some guidance on how to achieve this, I would greatly appreciate it. Thank you.

javascript canvas three.js

Answer 1

Answer №1

Utilize the THREE.Raycaster() in conjunction with THREE.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 light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(0, 5, 10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial({
  color: "green"
}));
scene.add(box);

var plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 1));

btnMove.addEventListener("click", onClick, false);

var raycaster = new THREE.Raycaster();
var corner = new THREE.Vector2();
var cornerPoint = new THREE.Vector3();

function onClick() {
  corner.set(-1, -1); // NDC of the bottom-left corner
  raycaster.setFromCamera(corner, camera);
  raycaster.ray.intersectPlane(plane, cornerPoint);
  box.position.copy(cornerPoint)
    .add(new THREE.Vector3(1, 1, -1)); // align the position of the box
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

#btnMove {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<button id="btnMove">Move bottom-left</button>

Answer 2

Utilize the THREE.Raycaster() in conjunction with THREE.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 light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(0, 5, 10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial({
  color: "green"
}));
scene.add(box);

var plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 1));

btnMove.addEventListener("click", onClick, false);

var raycaster = new THREE.Raycaster();
var corner = new THREE.Vector2();
var cornerPoint = new THREE.Vector3();

function onClick() {
  corner.set(-1, -1); // NDC of the bottom-left corner
  raycaster.setFromCamera(corner, camera);
  raycaster.ray.intersectPlane(plane, cornerPoint);
  box.position.copy(cornerPoint)
    .add(new THREE.Vector3(1, 1, -1)); // align the position of the box
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

#btnMove {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<button id="btnMove">Move bottom-left</button>

Placing a three-dimensional object in the corners of the canvas using three.js

Answer №1

Similar questions

I encountered an issue when trying to launch my React application, as the CMD displayed an npm error message stating 'npm error! missing script:start'. Can someone offer assistance with this problem?

Displaying a Dynamic Loading Animation While Making an AJAX Call with jQuery

Detecting the specific button that was selected with PHP

Can you explain the distinction between incorporating and excluding the keyword "await" in the following code snippets?

Assertion using Node.js with Selenium WebDriver

Tips for verifying a list of objects within a request body with JOI

Step-by-step guide on building a mat-table with nested attributes as individual rows

Transmit information from node.js to the frontend utilizing only raw JavaScript

In order for element.click() to be successful, alert() must be called beforehand

Exploring the functionality of setFromSphericalCoords in Three.js

Implementing a specialized CSS handler for Node.JS

Error: Unable to access the property 'map' as it is undefined | React, Redux

What is the reason for the lack of user data being saved in studio3t?

Navigating through various div elements in Javascript and sending parameters to a script

Converting a single world coordinate unit into screen pixels using THREE.js

Creating dynamic HTML elements with bound JSON data

I am not sure how to properly execute this asynchronously

The error "Uncaught TypeError: Cannot read property 'render' of undefined" occurs when using Three.js along with OrbitControls

The input value linked with Vue is not displaying on the DOM

How are the actions in react redux able to utilize dispatch and getState methods?