Толстая стрелка THREE.js с возможностью lookAt ()
Я хотел создать сетку «Толстая стрела», то есть стрелу, как у стандартного помощника по стрелам, но с стержнем, сделанным из a cylinderвместо a line.
tldr; не копируйте дизайн Arrow Helper; см. раздел « Эпилог » в конце вопроса.
Поэтому я скопировал и модифицировал код для своих нужд (без конструктора и методов) и внес изменения, и теперь он работает нормально: -
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
//... START of ARROWMAKER SET of FUNCTIONS
// adapted from https://github.com/mrdoob/three.js/blob/master/src/helpers/ArrowHelper.js
//====================================
function F_Arrow_Fat_noDoesLookAt_Make ( dir, origin, length, shaftBaseWidth, shaftTopWidth, color, headLength, headBaseWidth, headTopWidth )
{
//... dir is assumed to be normalized
var thisArrow = new THREE.Object3D();////SW
if ( dir === undefined ) dir = new THREE.Vector3( 0, 0, 1 );
if ( origin === undefined ) origin = new THREE.Vector3( 0, 0, 0 );
if ( length === undefined ) length = 1;
if ( shaftBaseWidth === undefined ) shaftBaseWidth = 0.02 * length;
if ( shaftTopWidth === undefined ) shaftTopWidth = 0.02 * length;
if ( color === undefined ) color = 0xffff00;
if ( headLength === undefined ) headLength = 0.2 * length;
if ( headBaseWidth === undefined ) headBaseWidth = 0.4 * headLength;
if ( headTopWidth === undefined ) headTopWidth = 0.2 * headLength;//... 0.0 for a point.
/* CylinderBufferGeometry parameters from:-
// https://threejs.org/docs/index.html#api/en/geometries/CylinderBufferGeometry
* radiusTop — Radius of the cylinder at the top. Default is 1.
* radiusBottom — Radius of the cylinder at the bottom. Default is 1.
* height — Height of the cylinder. Default is 1.
* radialSegments — Number of segmented faces around the circumference of the cylinder. Default is 8
* heightSegments — Number of rows of faces along the height of the cylinder. Default is 1.
* openEnded — A Boolean indicating whether the ends of the cylinder are open or capped. Default is false, meaning capped.
* thetaStart — Start angle for first segment, default = 0 (three o'clock position).
* thetaLength — The central angle, often called theta, of the circular sector. The default is 2*Pi, which makes for a complete cylinder.
*/
//var shaftGeometry = new THREE.CylinderBufferGeometry( 0.0, 0.5, 1, 8, 1 );//for strongly tapering, pointed shaft
var shaftGeometry = new THREE.CylinderBufferGeometry( 0.1, 0.1, 1, 8, 1 );//shaft is cylindrical
//shaftGeometry.translate( 0, - 0.5, 0 );
shaftGeometry.translate( 0, + 0.5, 0 );
//... for partial doesLookAt capability
//shaftGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
var headGeometry = new THREE.CylinderBufferGeometry( 0, 0.5, 1, 5, 1 ); //for strongly tapering, pointed head
headGeometry.translate( 0, - 0.5, 0 );
//... for partial doesLookAt capability
//headGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
thisArrow.position.copy( origin );
/*thisArrow.line = new Line( _lineGeometry, new LineBasicMaterial( { color: color, toneMapped: false } ) );
thisArrow.line.matrixAutoUpdate = false;
thisArrow.add( thisArrow.line ); */
thisArrow.shaft = new THREE.Mesh( shaftGeometry, new THREE.MeshLambertMaterial( { color: color } ) );
thisArrow.shaft.matrixAutoUpdate = false;
thisArrow.add( thisArrow.shaft );
thisArrow.head = new THREE.Mesh( headGeometry, new THREE.MeshLambertMaterial( { color: color } ) );
thisArrow.head.matrixAutoUpdate = false;
thisArrow.add( thisArrow.head );
//thisArrow.setDirection( dir );
//thisArrow.setLength( length, headLength, headTopWidth );
var arkle = new THREE.AxesHelper (2 * length);
thisArrow.add (arkle);
F_Arrow_Fat_noDoesLookAt_setDirection( thisArrow, dir ) ;////SW
F_Arrow_Fat_noDoesLookAt_setLength ( thisArrow, length, headLength, headBaseWidth ) ;////SW
F_Arrow_Fat_noDoesLookAt_setColor ( thisArrow, color ) ;////SW
scene.add ( thisArrow );
//... this screws up for the F_Arrow_Fat_noDoesLookAt kind of Arrow
//thisArrow.lookAt(0,0,0);//...makes the arrow's blue Z axis lookAt Point(x,y,z).
}
//... EOFn F_Arrow_Fat_noDoesLookAt_Make().
//=============================================
function F_Arrow_Fat_noDoesLookAt_setDirection( thisArrow, dir )
{
// dir is assumed to be normalized
if ( dir.y > 0.99999 )
{
thisArrow.quaternion.set( 0, 0, 0, 1 );
} else if ( dir.y < - 0.99999 )
{
thisArrow.quaternion.set( 1, 0, 0, 0 );
} else
{
const _axis = /*@__PURE__*/ new THREE.Vector3();
_axis.set( dir.z, 0, - dir.x ).normalize();
const radians = Math.acos( dir.y );
thisArrow.quaternion.setFromAxisAngle( _axis, radians );
}
}
//... EOFn F_Arrow_Fat_noDoesLookAt_setDirection().
//=========================================
function F_Arrow_Fat_noDoesLookAt_setLength( thisArrow, length, headLength, headBaseWidth )
{
if ( headLength === undefined ) headLength = 0.2 * length;
if ( headBaseWidth === undefined ) headBaseWidth = 0.2 * headLength;
thisArrow.shaft.scale.set( 1, Math.max( 0.0001, length - headLength ), 1 ); // see #17458
//x&z the same, y as per length-headLength
//thisArrow.shaft.position.y = length;//SW ???????
thisArrow.shaft.updateMatrix();
thisArrow.head.scale.set( headBaseWidth, headLength, headBaseWidth ); //x&z the same, y as per length
thisArrow.head.position.y = length;
thisArrow.head.updateMatrix();
}
//...EOFn F_Arrow_Fat_noDoesLookAt_setLength().
//========================================
function F_Arrow_Fat_noDoesLookAt_setColor( thisArrow, color )
{
thisArrow.shaft.material.color.set( color );
thisArrow.head.material.color.set( color );
}
//...EOFn F_Arrow_Fat_noDoesLookAt_setColor().
//... END of ARROWMAKER SET of FUNCTIONS
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
//= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Это нормально работает для стрелки с фиксированным направлением, где направление стрелки может быть указано во время строительства.
Но теперь мне нужно со временем менять ориентацию стрелки (для отслеживания движущейся цели). В настоящее время функции Object3D.lookAt () недостаточно, поскольку стрелка указывает вдоль оси y Object3D, тогда как lookAt () ориентирует ось z Object3D, чтобы смотреть на заданную целевую позицию.
Экспериментируя, я частично добился этого, используя: -
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
на геометрии вала и головки (2 строки закомментированы в приведенном выше фрагменте кода). Кажется, что цилиндрические сетки указывают в правильном направлении. Но проблема в том, что сетки имеют неправильную форму, а сетка головки смещена от сетки вала.
Методом проб и ошибок я мог бы скорректировать код, чтобы стрелка работала для моего настоящего примера. Но (учитывая мое слабое понимание кватернионов) я не уверен, что он (а) будет достаточно общим для применения во всех ситуациях или (б) будет достаточно надежным в будущем против эволюции THREE.js.
Так что я был бы признателен за любые решения / рекомендации по реализации возможности lookAt () для этой «Толстой стрелки».
Эпилог
Мой главный вывод - НЕ следовать дизайну стрелки-помощника.
Как показывают ответы TheJim01 и somethinghere, есть более простой подход с использованием функции «вложенности» Object3D.add ().
Например:-
(1) создать две цилиндрические сетки (для вала и стрелки), которые по умолчанию будут указывать в направлении Y; сделайте длину геометрии = 1.0, чтобы облегчить масштабирование в будущем.
(2) Добавьте сетки к родительскому объекту Object3D.
(3) Поверните родительский элемент на +90 градусов вокруг оси X, используя parent.rotateX(Math.PI/2).
(4) Добавьте родительский объект к дедушке и бабушке.
(5) Последующее использование grandparent.lookAt(target_point_as_World_position_Vec3_or_x_y_z).
NB lookAt () не будет работать должным образом, если у родителей или бабушек и дедушек есть масштабирование, отличное от (n,n,n).
Типы родительских и прародительских объектов могут быть простыми THREE.Object3D, или THREE.Group, или THREE.Mesh(сделать невидимыми, если требуется, например, установив небольшие размеры или .visibility=false)
Arrow Helper можно использовать динамически, но только если внутреннее направление установлено на (0,0,1) перед использованием lookAt ().
Ответы
Вы можете обратиться lookAtк любому Object3D.Object3D.lookAt( ... )
Вы уже обнаружили, что lookAtзаставляет формы указывать в нужном +Zнаправлении, и компенсируете это. Но можно сделать еще один шаг вперед с введением Group. Groups также являются производными от Object3D, поэтому они также поддерживают lookAtметод.
let W = window.innerWidth;
let H = window.innerHeight;
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.set(10, 10, 50);
camera.lookAt(scene.position);
scene.add(camera);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, -1);
camera.add(light);
const group = new THREE.Group();
scene.add(group);
const arrowMat = new THREE.MeshLambertMaterial({color:"green"});
const arrowGeo = new THREE.ConeBufferGeometry(2, 5, 32);
const arrowMesh = new THREE.Mesh(arrowGeo, arrowMat);
arrowMesh.rotation.x = Math.PI / 2;
arrowMesh.position.z = 2.5;
group.add(arrowMesh);
const cylinderGeo = new THREE.CylinderBufferGeometry(1, 1, 5, 32);
const cylinderMesh = new THREE.Mesh(cylinderGeo, arrowMat);
cylinderMesh.rotation.x = Math.PI / 2;
cylinderMesh.position.z = -2.5;
group.add(cylinderMesh);
function render() {
renderer.render(scene, camera);
}
function resize() {
W = window.innerWidth;
H = window.innerHeight;
renderer.setSize(W, H);
camera.aspect = W / H;
camera.updateProjectionMatrix();
render();
}
window.addEventListener("resize", resize);
resize();
let rad = 0;
function animate() {
rad += 0.05;
group.lookAt(Math.sin(rad) * 100, Math.cos(rad) * 100, 100);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
background: skyblue;
}<script src="https://threejs.org/build/three.min.js"></script>Ключевым моментом здесь является то, что конус / вал должны указывать в +Zнаправлении, а затем добавляются к Group. Это означает, что их ориентация теперь локальна для группы . Когда группа lookAtменяется, формы следуют ее примеру. А поскольку формы «стрелки» указывают в локальном +Zнаправлении группы, это означает, что они также указывают на любую заданную позицию group.lookAt(...);.
Дальнейшая работа
Это только отправная точка. Вам нужно будет адаптировать это к тому, как вы хотите, чтобы она работала с построением стрелки в правильном положении, с правильной длиной и т. Д. Тем не менее, шаблон группирования должен lookAtоблегчить работу.
Все, что вам нужно, - это немного больше понять о вложенности, которая позволяет размещать объекты относительно их родителей. Как упоминалось в ответе выше, вы можете использовать Groupили Object3D, но это не обязательно. Вы можете просто вложить стрелку в цилиндр и направить цилиндр в направлении оси Z, а затем использовать встроенные методы, не усложняющие задачу lookAt.
Старайтесь не использовать матрицы или кватернионы для таких простых вещей, как это, так как это значительно усложняет понимание вещей. Поскольку THREE.js допускает вложенные фреймы, воспользуйтесь этим!
const renderer = new THREE.WebGLRenderer;
const camera = new THREE.PerspectiveCamera;
const scene = new THREE.Scene;
const mouse = new THREE.Vector2;
const raycaster = new THREE.Raycaster;
const quaternion = new THREE.Quaternion;
const sphere = new THREE.Mesh(
new THREE.SphereGeometry( 10, 10, 10 ),
new THREE.MeshBasicMaterial({ transparent: true, opacity: .1 })
);
const arrow = new THREE.Group;
const arrowShaft = new THREE.Mesh(
// We want to ensure our arrow is completely offset into one direction
// So the translation ensure every bit of it is in Y+
new THREE.CylinderGeometry( .1, .3, 3 ).translate( 0, 1.5, 0 ),
new THREE.MeshBasicMaterial({ color: 'blue' })
);
const arrowPoint = new THREE.Mesh(
// Same thing, translate to all vertices or +Y
new THREE.ConeGeometry( 1, 2, 10 ).translate( 0, 1, 0 ),
new THREE.MeshBasicMaterial({ color: 'red' })
);
const trackerPoint = new THREE.Mesh(
new THREE.SphereGeometry( .2 ),
new THREE.MeshBasicMaterial({ color: 'green' })
);
const clickerPoint = new THREE.Mesh(
trackerPoint.geometry,
new THREE.MeshBasicMaterial({ color: 'yellow' })
);
camera.position.set( 10, 10, 10 );
camera.lookAt( scene.position );
// Place the point at the top of the shaft
arrowPoint.position.y = 3;
// Point the shaft into the z-direction
arrowShaft.rotation.x = Math.PI / 2;
// Attach the point to the shaft
arrowShaft.add( arrowPoint );
// Add the shaft to the global arrow group
arrow.add( arrowShaft );
// Add the arrow to the scene
scene.add( arrow );
scene.add( sphere );
scene.add( trackerPoint );
scene.add( clickerPoint );
renderer.domElement.addEventListener( 'mousemove', mouseMove );
renderer.domElement.addEventListener( 'click', mouseClick );
renderer.domElement.addEventListener( 'wheel', mouseWheel );
render();
document.body.appendChild( renderer.domElement );
function render(){
renderer.setSize( innerWidth, innerHeight );
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.render( scene, camera );
}
function mouseMove( event ){
mouse.set(
event.clientX / event.target.clientWidth * 2 - 1,
-event.clientY / event.target.clientHeight * 2 + 1
);
raycaster.setFromCamera( mouse, camera );
const hit = raycaster.intersectObject( sphere ).shift();
if( hit ){
trackerPoint.position.copy( hit.point );
render();
}
document.body.classList.toggle( 'tracking', !!hit );
}
function mouseClick( event ){
clickerPoint.position.copy( trackerPoint.position );
arrow.lookAt( trackerPoint.position );
render();
}
function mouseWheel( event ){
const angle = Math.PI * event.wheelDeltaX / innerWidth;
camera.position.applyQuaternion(
quaternion.setFromAxisAngle( scene.up, angle )
);
camera.lookAt( scene.position );
render();
}body { padding: 0; margin: 0; }
body.tracking { cursor: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>Вы можете перемещаться с помощью мыши (если она имеет горизонтальную прокрутку, она должна быть на трекпадах) и щелкнуть, чтобы указать стрелку. Я также добавил несколько пунктов слежения , так что вы можете увидеть , что `LookAt» делает работу без усложнять, и что это указывает на точку , нажал на оберточной сфере.
И поэтому я определенно набирал это слово shaftслишком часто. Это начинает звучать странно.