三.js - 如何翻译几何 [英] three.js - how to translate geometry

问题描述

我有一个脚本可以定位各种宽度、高度和深度的立方体，并且正在努力根据 xAxis、yAxis 和 zAxis(它们也有所不同)准确地排列它们.

I have a script that positions cubes of various width, height and depth and am struggling to line them up accurately based on the xAxis, yAxis and zAxis (which also vary).

var geometry = new THREE.BoxGeometry(width, height, depth);
var cube = new THREE.Mesh(geometry, material);
cube.position.set(xAxis, yAxis, -zAxis);
scene.add(cube);

我相信这是因为立方体是根据它的中心定位的，但是有没有一种方法可以根据前、左和角来定位它——这可以解决不同尺寸立方体的这个问题?

I believe this is because the cube is positioned based on it's centre, however is there a method to position it based on the front, left and corner - which would solve this issue for varying sized cubes?

推荐答案

您可以平移几何图形，使长方体的一个角位于原点:

You can translate your geometry so one corner of the box is located at the origin:

var geometry = new THREE.BoxGeometry( width, height, depth );
geometry.translate( width / 2, height / 2, depth / 2 );

如果你有许多不同大小的立方体实例，最好使用这种模式:

If you have many cube instances of different sizes, it is better to use this pattern:

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); // create once and reuse
geometry.translate( 0.5, 0.5, 0.5 );

var cube_1 = new THREE.Mesh( geometry, material );
cube_1.scale.set( width, height, depth );

three.js r.87

three.js r.87

这篇关于三.js - 如何翻译几何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！