Gridhelper only appears to have the ability to create a square grid based on size. Is there a way to make it generate a rectangular grid where I can specify both width and height in three.js? I am aware of the 'scale' property, but I'm concerned it may distort the divisions. Are there any alternatives or workarounds for achieving this?
var size = 50;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
Discovered a helpful solution over at Bocoup:
function generateGrid(options) {
var settings = options || {
height: 500,
width: 500,
linesHeight: 10,
linesWidth: 10,
color: 0xDD006C
};
var material = new THREE.LineBasicMaterial({
color: settings.color,
opacity: 0.2
});
var gridObj = new THREE.Object3D(),
gridGeometry = new THREE.Geometry(),
stepWidth = 2 * settings.width / settings.linesWidth,
stepHeight = 2 * settings.height / settings.linesHeight;
// Generate grid lines for width
for (var i = -settings.width; i <= settings.width; i += stepWidth) {
gridGeometry.vertices.push(new THREE.Vector3(-settings.height, i, 0));
gridGeometry.vertices.push(new THREE.Vector3(settings.height, i, 0));
}
// Generate grid lines for height
for (var i = -settings.height; i <= settings.height; i += stepHeight) {
gridGeometry.vertices.push(new THREE.Vector3(i, -settings.width, 0));
gridGeometry.vertices.push(new THREE.Vector3(i, settings.width, 0));
}
var line = new THREE.Line(gridGeometry, material, THREE.LinePieces);
gridObj.add(line);
return gridObj;
}
However, it was necessary to modify
var line = new THREE.Line(gridGeometry, material, THREE.LinePieces);
(deprecated) to
var line = new THREE.LineSegments(gridGeometry, material);
The solution provided by Shai UI was attempted, but it was discovered that some of the code had already been deprecated.
Currently, I am utilizing the most recent version of Three.js (r155). Below is the modified code that worked for me:
function generateGrid(options) {
var settings = options || {
height: 60,
width: 30,
linesHeight: 60,
linesWidth: 30,
color: 0x000000
};
const points = [];
var material = new THREE.LineBasicMaterial({
color: settings.color,
transparent: true,
opacity: 0.2
});
var gridObject = new THREE.Object3D();
var stepWidth = 2 * settings.width / settings.linesWidth;
var stepHeight = 2 * settings.height / settings.linesHeight;
// Add horizontal lines
for (var i = -settings.height; i <= settings.height; i += stepHeight) {
points.push(new THREE.Vector3(-settings.width, i, 0));
points.push(new THREE.Vector3(settings.width, i, 0));
}
// Add vertical lines
for (var i = -settings.width; i <= settings.width; i += stepWidth) {
points.push(new THREE.Vector3(i, -settings.height, 0));
points.push(new THREE.Vector3(i, settings.height, 0));
}
var gridGeometry = new THREE.BufferGeometry().setFromPoints(points);
var lineSegments = new THREE.LineSegments(gridGeometry, material);
gridObject.add(lineSegments);
scene.add(gridObject);
}
I am currently experiencing an issue with the checkboxes in my JavaScript game. They do not respond to individual clicks as expected. Each time I log the output, I receive index 0 regardless of which box I click on. The checkboxes seem unresponsive but the ...
I've noticed a strange issue when using http://underscorejs.org/ with Node JS: If a reference error occurs while evaluating a template function, Node JS will become unresponsive! Examples: EXAMPLE 1: SUCCESSFUL SCENARIO: var template = "<%= tes ...
Looking to filter elements from an array based on partial matching of a string. For example, trying to match PGVF.NonSubmit.Action with NonSubmit by checking if the string contains certain keywords. The current code is not functioning as expected and only ...
I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...
I have a form with a select element, and I want some code to run when I click on it, but not when I choose an option. The issue is that the code is running twice, preventing me from selecting an option as it resets itself each time. Here is the HTML: &l ...
<div id="toggler" class="toggler"> <div id="toggler" class="line1"></div> <div id="toggler" class="line2"></div> <div id="toggler" class=& ...
Despite not receiving any errors from Visual Studio Code, I’m encountering an error in Chrome's console. Below is the code snippet from my interfaces.ts file: export interface Data1{ month: string; employeeName: string; date: string; employmentSta ...
When using the state hook in my code, I have: const [features, setFeatures] = useState([]) const [medicalProblem, setMedicalProblem] = useState([]) The medicalProblem variable will be initially populated with a response from an API call: useEf ...
I encountered an issue involving an HTML element with the ID of BaseGridView. When I call a function directly on this element, everything works perfectly. However, if I use document.getElementById() to retrieve the element and then call the function, it do ...
When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...
I have a scenario where I receive multiple responses in the form of base64 encoded PDFs, which I need to decode and merge into one PDF file. Below is the code snippet for reference: var pdf_base1 = "data:application/pdf;base64,JVBERi0xLjQKJfbk/N8KMSAwIG9 ...
I am new to using Jquery and Javascript, but I have managed to create a script that communicates with a php controller in symfony2. My query is, how can I shorten the script length? Is there a more efficient way to solve the logic instead of using the swi ...
I'm having some trouble setting up a chatbot screen with the "botui" and "vue-cli". Whenever I try to display the screen, I encounter an "Unknown custom element: " error. Below is the code snippet that I am using. Can you please help me figure out ...
My dilemma lies in processing an input that follows the format of "ABC, DEF, GHI, ...." The task at hand is to convert this comma-separated list into an array and make a POST request for each value in the array using my API. I'm seeking guidance on t ...
I need help extracting real-time data from a datatable and populating a form for editing when an edit button is clicked on each row. Despite my efforts, the ajax.reload() function doesn't load the table in time to fill the form with correct data. The ...
If I want to search for a specific book based on the reviews field, how can I do that? The reviews field contains an array of objects, and one of the keys in each object is the description. If my search query matches the description of any review, then I w ...
I have been working on my website and I am looking to incorporate a form that opens up once the login button is clicked. This form was generated using an online form builder which provides an embed code for seamless integration onto websites. Below, you wi ...
Working on a basic web application using React and GatsbyJS, with content management handled by NetlifyCMS. Utilizing gatsby-transformer-remark to load image paths for display through gatsby-transformer-sharp. Created an Image component that takes in the ...
The child component is not receiving the props as expected. When printed, it displays an empty object. The problem seems to be in the News.js file specifically related to passing props to the child component from App.js. All functions are operational excep ...
Can anyone provide some insight on integrating Three.js and Easel.js in a web development project? I've seen a few games that successfully utilize both libraries, but I'm curious about the typical approach for combining them. Any explanations or ...