Is it possible to incorporate diagonal lines into a GridHelper object using Three.js?

Question

Is it possible to incorporate diagonal lines into a GridHelper object using Three.js?

I am really interested in achieving the effect seen in the first image below (I also want to replicate the opposite diagonal, but I can figure that out later). The second image shows a standard GridHelper.

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

Do you think it would be feasible to create this effect by adding another grid helper and rotating it 45 degrees along the y-axis?

After searching through the official documentation, I couldn't find any information on how to do this. So I assume there might be an alternative method. Does anyone have any suggestions on how to achieve this?

This is the code I used for the GridHelper:

grid = new THREE.GridHelper(80, 15, 0x000000, 0x000000);
grid.position.y = -0.2;
scene.add(grid);

My intuition tells me that the solution might involve using EdgesGeometry. However, I'm not completely certain about the correct approach due to:

EdgesGeometry( geometry, thresholdAngle )

Where the geometry parameter needs to be a valid geometry object.

Is the GridHelper considered a geometry object? You can review the official documentation here.

EDIT: For reference, here is a visual example demonstrating my current situation: codepen example.

javascript three.js

Answer 1

Answer №1

To achieve the desired result, use THREE.PlaneBufferGeometry() along with a material that has wireframe: true.

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

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

var gridGeometry = new THREE.PlaneBufferGeometry(80, 80, 15, 15);
gridGeometry.rotateY(Math.PI);
gridGeometry.rotateX(-Math.PI * .5);
var gridMaterial = new THREE.MeshBasicMaterial({
  color: "black",
  wireframe: true
});
var gridWithDiagonals = new THREE.Mesh(gridGeometry, gridMaterial);
scene.add(gridWithDiagonals);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

To achieve the desired result, use THREE.PlaneBufferGeometry() along with a material that has wireframe: true.

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

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

var gridGeometry = new THREE.PlaneBufferGeometry(80, 80, 15, 15);
gridGeometry.rotateY(Math.PI);
gridGeometry.rotateX(-Math.PI * .5);
var gridMaterial = new THREE.MeshBasicMaterial({
  color: "black",
  wireframe: true
});
var gridWithDiagonals = new THREE.Mesh(gridGeometry, gridMaterial);
scene.add(gridWithDiagonals);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Is it possible to incorporate diagonal lines into a GridHelper object using Three.js?

Answer №1

Similar questions

Implement a delay for a specific function and try again if the delay expires

Angular data binding between an input element and a span element

What are the steps to import a .obj 3D model into Three.js?

ES6: utilizing properties and methods of a subclass that inherit from the superclass

Exploring the world of technology with jQuery, harnessing the power of JSON objects

Dynamically Exporting Node Modules

The communication between the view and the model is failing in Angular JS, causing data not to be

What is the process for obtaining the cypress interception fixture twice but in two distinct formats?

JavaScript: Creating an array to store the most recent 5 search queries

Updating the attributes of an FBX object in ThreeJS post asynchronous loading

When the response is manually terminated, the next middleware layer in express.js is invoked

Troubleshooting: Why is Jquery unable to retrieve image height?

Immediately executing $digest following $watch's declaration results in an error message stating "$apply is currently in progress

Sending a POST request to a PHP file in React: A Step-by-Step Guide

How can I protect a text or script file from being accessed or downloaded by entering its URL directly into the browser address bar?

what are some advanced techniques for manipulating the DOM with a datatable?

Struggling with accurately configuring the input field in AngularJS?

Controlling dropdown menus filled with AJAX responseData

Turn a textfield on and off in real-time

Is it possible to refresh my application without using window.location.reload() or ngOnInit()?