Create dimension markers on a 3D cube in Three.js by drawing dimension lines

Question

Create dimension markers on a 3D cube in Three.js by drawing dimension lines

Is it possible to create dynamic "lines" with the Cube element to represent different "Dimensions" during runtime?

I have successfully created a cube and implemented functionality for users to input dimensions and modify the cube in real time. You can view the code here: http://jsfiddle.net/9Lvk61j3/

Currently, I am looking to display the actual Dimensions so that users are aware of the length, width, and height they are adjusting.

Here is the desired end result:

Below is the HTML code snippet: HTML:

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id="container"></div>
<div class="inputRow clear" id="dimensionsNotRound" data-role="tooltip">
    <label class="grid-8">Dimensions (pixels):</label>
    <br/>
    <br/>
    <div> <span>Length</span>

        <input class="numeric-textbox" id="inp-length" type="text" value="100">
        <br/>
        <br/>
    </div>
    <div> <span>Width</span>

        <input class="numeric-textbox" id="inp-width" type="text" value="50">
        <br/>
        <br/>
    </div>
    <div> <span>Height</span>

        <input class="numeric-textbox" id="inp-height" type="text" value="40">
        <br/>
        <br/>
    </div>
    <button id="btn">Click me to change the Dimensions</button>

JS

For reference, here is the corresponding JSFiddle link: http://jsfiddle.net/9Lvk61j3/

If you require any additional information or have suggestions, please let me know.

javascript three.js

Answer 1

Answer №1

When dealing with drawing dimensions, various challenges may arise:

You could have numerous dimensions, but not all might be clearly visible:
- some could be hidden,
- others might seem too small if the camera is distant from the object,
- certain dimensions may overlap with others or elements of the object,
- and some might be observed from inconvenient angles.
The text size needs to remain consistent regardless of how you maneuver the camera.

My solution addresses most of these issues: https://jsfiddle.net/mmalex/j35p1fw8/

https://i.sstatic.net/uM3uk.png

var geometry = new THREE.BoxGeometry(8.15, 0.5, 12.25);
var material = new THREE.MeshPhongMaterial({
  color: 0x09f9f9,
  transparent: true,
  opacity: 0.75
});
var cube = new THREE.Mesh(geometry, material);
cube.geometry.computeBoundingBox();
root.add(cube);

var bbox = cube.geometry.boundingBox;

var dim = new LinearDimension(document.body, renderer, camera);

// define start and end point of dimension
var from = new THREE.Vector3(bbox.min.x, bbox.min.y, bbox.min.z);
var to = new THREE.Vector3(bbox.max.x, bbox.min.y, bbox.max.z);

// in which direction to "extrude" dimension away from object
var direction = new THREE.Vector3(0, 0, 1);

// request LinearDimension to create threejs node
var newDimension = dim.create(from, to, direction);

// make it cube child
cube.add(newDimension);

var animate = function() {
  requestAnimationFrame(animate);

  // we need to reposition dimension label on each camera change
  dim.update(camera);

  renderer.render(scene, camera);
};

Let's delve into helper classes now.

✔ The dimension line only displays when the camera angle isn't too sharp (more than 45°).

class FacingCamera determines the world plane best facing the camera, useful for concealing dimensions facing the camera at acute angles.

A separate fiddle to interact with class FacingCamera can be found here: https://jsfiddle.net/mmalex/56gzn8pL/

/* JavaScript code for FacingCamera class goes here */

✔ Dimension text as an HTML element styled using CSS and positioned via three.js raycasting logic.

class LinearDimension creates a linear dimension instance with arrows and text labels while managing it.

Complete implementation of LinearDimension:

/* JavaScript code for LinearDimension class goes here */

Answer 2

When dealing with drawing dimensions, various challenges may arise:

You could have numerous dimensions, but not all might be clearly visible:
- some could be hidden,
- others might seem too small if the camera is distant from the object,
- certain dimensions may overlap with others or elements of the object,
- and some might be observed from inconvenient angles.
The text size needs to remain consistent regardless of how you maneuver the camera.

My solution addresses most of these issues: https://jsfiddle.net/mmalex/j35p1fw8/

https://i.sstatic.net/uM3uk.png

var geometry = new THREE.BoxGeometry(8.15, 0.5, 12.25);
var material = new THREE.MeshPhongMaterial({
  color: 0x09f9f9,
  transparent: true,
  opacity: 0.75
});
var cube = new THREE.Mesh(geometry, material);
cube.geometry.computeBoundingBox();
root.add(cube);

var bbox = cube.geometry.boundingBox;

var dim = new LinearDimension(document.body, renderer, camera);

// define start and end point of dimension
var from = new THREE.Vector3(bbox.min.x, bbox.min.y, bbox.min.z);
var to = new THREE.Vector3(bbox.max.x, bbox.min.y, bbox.max.z);

// in which direction to "extrude" dimension away from object
var direction = new THREE.Vector3(0, 0, 1);

// request LinearDimension to create threejs node
var newDimension = dim.create(from, to, direction);

// make it cube child
cube.add(newDimension);

var animate = function() {
  requestAnimationFrame(animate);

  // we need to reposition dimension label on each camera change
  dim.update(camera);

  renderer.render(scene, camera);
};

Let's delve into helper classes now.

✔ The dimension line only displays when the camera angle isn't too sharp (more than 45°).

class FacingCamera determines the world plane best facing the camera, useful for concealing dimensions facing the camera at acute angles.

A separate fiddle to interact with class FacingCamera can be found here: https://jsfiddle.net/mmalex/56gzn8pL/

/* JavaScript code for FacingCamera class goes here */

✔ Dimension text as an HTML element styled using CSS and positioned via three.js raycasting logic.

class LinearDimension creates a linear dimension instance with arrows and text labels while managing it.

Complete implementation of LinearDimension:

/* JavaScript code for LinearDimension class goes here */

Create dimension markers on a 3D cube in Three.js by drawing dimension lines

Answer №1

Similar questions

Output a message to the Java console once my Selenium-created Javascript callback is triggered

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

The presence of #xfbml=1 is leading to some issues

What is the best way to manage variables when iterating over an object of objects in a loop that contains inner asynchronous code?

Looping through NavItems component using JavaScript or Angular

Integrating tooltips on Dimple.js line charts

Develop a built-in Button for Liking posts

Having trouble integrating a custom dialog with DirtyForms plugin

Positioning a designated div directly above a designated spot on the canvas

Require assistance in understanding JSON data in the form of a variable

Exporting modules for import such as Grid and Grid.Item

What are some alternative methods for concealing certain content in my gallery without using java script?

Guide to automatically dismiss calendar popup after selecting a date

Anticipating the conclusion of a pending GET request

Parsing JSON data using multilevel iteration in JavaScript is a complex yet

What is the method to delete an image in JavaScript after a specific period of time has passed since its creation?

Button react-native press following textInput within scroll view aware of keyboard movements

The hover effect becomes disabled once the slider is toggled

AngularJS: Recommendations for structuring code to dynamically update the DOM in response to AJAX requests

Efficiently adding values to a variable with the forEach method