第一张图就是我想要的。 (我什至也想要相反的对 Angular 线,但我会相应地得出它。)第二张图片是普通的 GridHelper
。
这是否可以通过添加另一个网格助手但沿 y 轴旋转 45 度来实现?
我似乎无法在 official docs 中找到任何内容,所以我假设有另一种方法。关于如何做到这一点的任何指示?
我的 GridHelper
代码:
grid = new THREE.GridHelper(80, 15, 0x000000, 0x000000);
grid.position.y = -0.2;
scene.add(grid);
我认为一个可能的解决方案可能在于 EdgesGeometry
。我仍然不确定如何进行此操作,因为:
EdgesGeometry( geometry, thresholdAngle )
其中 geometry
是任何几何对象。
GridHelper
算作几何对象吗?这是 official docs .
编辑: 这是我当前情况的直观示例:codepen example .
最佳答案
使用 THREE.PlaneBufferGeometry()
和带有 wireframe: true
的 Material 将为您提供所需的结果。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 50, 25);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var gridGeometry = new THREE.PlaneBufferGeometry(80, 80, 15, 15);
gridGeometry.rotateY(Math.PI);
gridGeometry.rotateX(-Math.PI * .5);
var gridMaterial = new THREE.MeshBasicMaterial({
color: "black",
wireframe: true
});
var gridWithDiagonals = new THREE.Mesh(gridGeometry, gridMaterial);
scene.add(gridWithDiagonals);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
关于javascript - 在 Three.js 中向 GridHelper 对象添加对 Angular 线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47376009/