What is the process for adjusting the size of a gridHelper in three.js?

import * as THREE from '/build/three.module.js';


let scene, camera, renderer, gridHelper;
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 1500, 0);
camera.lookAt(0, 0, 0);


renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth/2, window.innerHeight);

const container = document.getElementById('smallContainer');
container.appendChild(renderer.domElement);

// Grid
gridHelper = new THREE.GridHelper(500, 4, 0xffffff, 0xff0000);
scene.add(gridHelper);

I need to adjust the width and height of my gridhelper manually. How can I do this? Can I scale it? This is my current code.

const v = new THREE.Vector3(1, 1/2, 1);
gridHelper.addScaledVector(v, 1);

I attempted the code above, but it didn't work as expected.

javascriptthree.js

Answer №1

gridHelper.addScaledVector(v, 1);

Runtime error alert! The code encounters a runtime error because the GridHelper lacks the method addScaledVector().

Consider adjusting the scale property instead.

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.set(5, 5, 5);

  scene = new THREE.Scene();
  camera.lookAt(scene.position);

  const helper = new THREE.GridHelper();
  helper.scale.setScalar(2);
  scene.add(helper);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}
body {
  margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295d415b4c4c691907181b1a">[email protected]</a>/build/three.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: AngularJS - Issues with nested controllers not functioning properly within ng-include

According to the AngularJS documentation (refer to nested controller fragment), I am attempting to implement nested controllers using ng-include Main.html <body id="spaWrapperApp" ng-app="spaWrapperApp"> <div class="container-fluid" id=" ...

javascriptjavaangularjs

Export the model group to GLB format and then import it into threejs. Can individual materials be added to the models within the model group afterwards?

Let's say I exported a model group named C, which includes two models: A and B. When exporting a GLB file using Blender, does the file contain labels for models A and B? Also, what code should be used to access model A within model group C and apply a ...

javascriptthree.js

It appears that React is not successfully transferring props to another component

Recently, I decided to follow a tutorial on creating a React application. However, I encountered a peculiar issue that has left me scratching my head. The problem arises when I attempt to pass data from one component to another. Despite successfully passi ...

javascriptreactjs

Svelte: wrong button triggered click event

My current setup involves a svelte app in which: Clicking a button labeled "Show" triggers the display of an input text box and a save button by setting a show variable to true. Upon clicking the "Save" button, a function is called that changes the show v ...

javascriptsveltesvelte-3

Show a visual content in Grails Server Pages created through a specific class

In my class file, I have the image path displayed as shown below: String val; val+= "<img src=/"PATH_TO_FILE/" alt=/"sometext/">" Now, I am attempting to load the image in a gsp view within a div using jQuery from the val variable. The image is be ...

javascriptjqueryhtmlimagegrails

Building a game using Javascript and a database for a project

I am currently working on developing an online game using a combination of javascript and php. My main objective is to create a seamless, real-time gameplay experience without the need to constantly refresh the page. However, I have encountered a signific ...

phpjavascriptmysqlajaxdatabase

What components and substances are needed for a particle system in Three.js?

After spending a few weeks working with particle systems in Three.js, I initially used an Object3D, incorporating my own Vector3s and various materials like MeshBasicMaterials, Phong, and Lambert. However, after discovering the built-in ParticleSystem obje ...

javascriptopengl-esthree.jsparticle-system

Using jQuery, you can submit a form easily

In my work with Django, I am developing a quiz web application that requires a form submission after answering each question. The questions are displayed correctly, but I am facing an issue when trying to submit the form with the answers. The answers to t ...

javascriptjquerydjangoforms

Tips for manipulating rows in HTML using jQuery when the id attribute is added

Apologies in advance for any language errors in my explanation I am working on an input table where each row has a unique ID, and the input in each row affects the next row. As new rows are added, I have implemented an incremental numbering system for the ...

javascriptphpjquerybootstrap-4codeigniter-3

Having trouble with the JavaScript DOM rewrite for aligning text?

function modifyTextAlignment(){ document.getElementById("th1").style.textAlign = "right"; } #th1{ text-align:left; } <table> <tr><center><th colspan="2" id="th1">List of Important Emergency Contacts</th><center></tr& ...

javascriptjqueryhtmlcss

Enter text into a field on a different webpage and verify if the output matches the expected result

Possible Duplicate: Exploring ways to bypass the same-origin policy I'm facing a scenario where I have a form on my website that requires validation of a number. The validation process involves checking this number against another website where e ...

javascriptjqueryhtmlajax

Obtain the HTML content of a webpage a few seconds following its initial loading

Currently, I am working on a script in nodejs to automate the process of fetching data from an online directory. Although this is new territory for me, I decided to go with javascript as it is a language I am comfortable with. After some research on Googl ...

javascriptjquerynode.jsphantomjscheerio

How to display currency input in Angular 2

Is there a way to dynamically format input as USD currency while typing? The input should have 2 decimal places and populate from right to left. For example, if I type 54.60 it should display as $0.05 -> $0.54 -> $5.46 -> $54.60. I found this PLUN ...

javascriptangulartypescriptdirective

Troubleshooting Typescript app compilation problem in a Docker environment

I am encountering a challenge while trying to build my typescript Express app using Docker. Surprisingly, the build works perfectly fine outside of Docker! Below is the content of my Dockerfile: FROM node:14-slim WORKDIR /app COPY package.json ./ COPY yarn ...

javascriptnode.jstypescriptdockerexpress

When I tried to retrieve the value by using deferred.resolve(value) in my .then() method, it

I am currently utilizing Q.js to make an API call with two loops in my main function structured like this: for i..10 for i...5 var promise = getLoc(x,y); promise.then(function(value) { //value is undefined... ...

javascriptnode.jsasynchronousqdeferred

Implementing Dynamic Parent Node Manipulation with Button Clicks in JavaScript

I am currently working on dynamically creating an input field using the append child method along with add and delete buttons to form a tree-like structure. The goal is to be able to create child nodes with add and delete buttons upon clicking the add butt ...

javascripthtmlcss

Fetching SFTP directory listings asynchronously using Node.js

I'm currently working on fetching SFTP listings using Node.js from multiple servers. To achieve this, I am utilizing the ssh2-sftp-client library and trying to manage the asynchronous connections by implementing a customized Promise.all() approach. T ...

javascriptnode.jsasynchronouspromise.allssh2-sftp-client

Verifying Value Equality in all Documents with MongoDB

One feature on my website allows users to input a number into the field labeled subNum in a form. Upon submission of the form, I need to validate whether the entered value already exists within any existing document. This validation process is implemented ...

javascriptmongodbmeteor

Top replacements for jQuery in AngularJS applications

It would be great to compile a comprehensive list of jQuery alternatives that are compatible with AngularJS, capable of manipulating styles (css), and supporting effects like fadeIn, fadeOut, slideDown, slideUp, etc. Based on feedback from comments, we sh ...

javascriptjqueryangularjsangularjs-scope

How come my effort to evade quotation marks in JSON isn't successful?

When trying to parse a JSON-string using the JQuery.parseJSON function, I encountered an error message that read: Uncaught SyntaxError: Unexpected token R. This was unusual as the only uppercase 'R' in my JSON-formatted string appeared right afte ...

javascriptjsonescaping