Visualization of geometrical shapes in Three.js using Json formatting

Question

Visualization of geometrical shapes in Three.js using Json formatting

I am seeking help with displaying the wireframe of a parallelepiped defined by vertexes in Json format using Three.js code. Here is the code snippet I am working with:

var testCube ={
                "metadata":{
                "version":json['version'],
                "type":json['type'],
                "uvs":json['n_uvs'],
                "normals":json['n_normals'],
                "faces":json['n_faces'],
                "generator":"io_three",
                "vertices":json['n_vertices'],
                                            },
                "faces":json['faces'],
                "vertices":json['vertices'],
                "normals":json['normals'],
                "uvs":[],
                "name":json['name']}

var loader = new THREE.JSONLoader();

var model = loader.parse( testCube );

meshBox = new THREE.Mesh( model.geometry, model.materials[ 0 ] );

var geo = new THREE.EdgesGeometry( meshBox.geometry );

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 });

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

Currently, the visualization produced by this code looks like this:

https://i.sstatic.net/UMB39.jpg

However, I would like to achieve a visualization where both the external and internal wireframes are visible, similar to this:

https://i.sstatic.net/50KCj.png

Question: Is there a way to modify the above Three.js code to achieve a full wireframe as shown in the second image?

Update: By utilizing the function WireframeGeometry, you get the following result:

https://i.sstatic.net/8Vpxp.png

It appears that diagonals are present on each face of the mesh. Is there a different function available that does not produce these diagonals?

Thank you for any assistance provided!

javascript json three.js wireframe

Answer 1

Answer №1

The solution is not perfect and requires further refinement and optimization.

To create a geometrical shape that can be shared between two instances of THREE.LineSegments() representing opposite sides of a box.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-15, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.AmbientLight(0xffffff, .5));
var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);

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

var material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
});
var params = box.geometry.parameters;
var geometryGridXY = Grid(params.width, params.height, params.widthSegments, params.heightSegments, "yellow");
var gridXYFront = new THREE.LineSegments(geometryGridXY, material);
gridXYFront.position.z = params.depth / 2 + 0.001;
box.add(gridXYFront);
var gridXYBack = new THREE.LineSegments(geometryGridXY, material);
gridXYBack.position.z = -params.depth / 2 - 0.001;
box.add(gridXYBack);

var geometryGridYZ = Grid(params.height, params.depth, params.heightSegments, params.depthSegments, "aqua");
var gridYZLeft = new THREE.LineSegments(geometryGridYZ, material);
gridYZLeft.position.x = -params.width / 2 - 0.001;
gridYZLeft.rotation.y = -Math.PI * .5;
box.add(gridYZLeft);

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>
<script>

function Grid(width, height, widthSegments, heightSegments, color) {

width = width || 1;
height = height || 1;
widthSegments = widthSegments || 1;
heightSegments = heightSegments || 1;
color = new THREE.Color(color !== undefined ? color : 0x444444);

var stepWidth = width / widthSegments;
var stepHeight = height / heightSegments;
var halfWidth = width / 2;
var halfHeight = height / 2;

var vertices = [],
colors = [], j = 0;

for (let i = 0, k = -halfHeight; i <= heightSegments; i++, k += stepHeight) {

vertices.push(-halfWidth, k, 0, halfWidth, k, 0);

color.toArray(colors, j); j += 3;
color.toArray(colors, j); j += 3;
}

for (let i = 0, k = -halfWidth; i <= widthSegments; i++, k += stepWidth) {

vertices.push(k, halfHeight, 0, k, -halfHeight, 0);

color.toArray(colors, j); j += 3;
color.toArray(colors, j); j += 3;
}

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

return geometry;

}

</script>

Answer 2

The solution is not perfect and requires further refinement and optimization.

To create a geometrical shape that can be shared between two instances of THREE.LineSegments() representing opposite sides of a box.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-15, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.AmbientLight(0xffffff, .5));
var light = new THREE.DirectionalLight(0xffffff, .5);
light.position.setScalar(10);
scene.add(light);

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

var material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
});
var params = box.geometry.parameters;
var geometryGridXY = Grid(params.width, params.height, params.widthSegments, params.heightSegments, "yellow");
var gridXYFront = new THREE.LineSegments(geometryGridXY, material);
gridXYFront.position.z = params.depth / 2 + 0.001;
box.add(gridXYFront);
var gridXYBack = new THREE.LineSegments(geometryGridXY, material);
gridXYBack.position.z = -params.depth / 2 - 0.001;
box.add(gridXYBack);

var geometryGridYZ = Grid(params.height, params.depth, params.heightSegments, params.depthSegments, "aqua");
var gridYZLeft = new THREE.LineSegments(geometryGridYZ, material);
gridYZLeft.position.x = -params.width / 2 - 0.001;
gridYZLeft.rotation.y = -Math.PI * .5;
box.add(gridYZLeft);

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>
<script>

function Grid(width, height, widthSegments, heightSegments, color) {

width = width || 1;
height = height || 1;
widthSegments = widthSegments || 1;
heightSegments = heightSegments || 1;
color = new THREE.Color(color !== undefined ? color : 0x444444);

var stepWidth = width / widthSegments;
var stepHeight = height / heightSegments;
var halfWidth = width / 2;
var halfHeight = height / 2;

var vertices = [],
colors = [], j = 0;

for (let i = 0, k = -halfHeight; i <= heightSegments; i++, k += stepHeight) {

vertices.push(-halfWidth, k, 0, halfWidth, k, 0);

color.toArray(colors, j); j += 3;
color.toArray(colors, j); j += 3;
}

for (let i = 0, k = -halfWidth; i <= widthSegments; i++, k += stepWidth) {

vertices.push(k, halfHeight, 0, k, -halfHeight, 0);

color.toArray(colors, j); j += 3;
color.toArray(colors, j); j += 3;
}

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

return geometry;

}

</script>

Visualization of geometrical shapes in Three.js using Json formatting

Answer №1

Similar questions

How can we effectively manage error responses and retry a failed call in NodeJS without getting tangled in callback hell?

I can't seem to get anything to show up on my React

Tips for utilizing the standard search functionality of Select2 while also implementing a remote data source

Is there another method to retrieve event.target from a React functional component?

Updating the redux state in react by passing a variable from a child component to the parent

Enhance Your Browsing Experience with this Chrome Extension for Page Interactions

Issue with looping in Javascript with jQuery

Does Javascript support annotation? If not, what is the best way to easily switch between debug and productive modes in a declarative manner?

The state in useState is failing to update correctly following selections made within the dropdown menus

Gulp is failing to convert SCSS files into CSS

What is the best way to center my navigation bar without interfering with the mobile version's JavaScript functionality?

Node.js implementation for processing batches of data from the Youtube Data API

What is the best way to determine which id has been clicked using jQuery?

utilize angular4 to dynamically link images from twitter based on certain conditions

Finding the nearest value by searching through data attributes using numeric values

What is the reason for instanceof Map returning false?

Storing events from FullCalendar into a database

Update the designated dropdown menu using its identification number

What is the best way to divide my discord.py balance among multiple servers?

A large canvas displaying a single optimized image