javascript - 如何在three.js中缩放gridHelper？

Question

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 have a gridhelper and i want to change its width and height manually, how can i do it? can i scale? this is my code.

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

I try the code above and didn't work.

Answer 1

gridHelper.addScaledVector(v, 1);

此代码产生运行时错误，因为 GridHelper没有方法 addScaledVector() .
尝试调制 scale属性(property)代替。

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/three@0.123/build/three.js"></script>