如何在 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);

我有一个gridhelper ，我想手动更改它的宽度和高度，我该怎么做？ 我可以缩放吗？ 这是我的代码。

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

我尝试了上面的代码并没有工作。

Answer 1

gridHelper.addScaledVector(v, 1);

此代码产生运行时错误，因为GridHelper没有方法addScaledVector() 。

尝试调整scale属性。

 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>