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