My arrow function is supposed to connect pick and place points using QuadraticBezierCurve3 and ConeGeometry, but the rotation of the cone doesn't align perfectly with the curve as shown in the snippet below!
I'm seeking advice on how I can enhance the visualization (cone rotation) of my arrow function. Any suggestions are greatly appreciated.
var camera, scene, renderer;
init();
animate();
/**
draw arrow
*/
function drawArrow(pick_pos, place_pos, scene) {
/**
* Curve
*/
const start = new THREE.Vector3();
start.add(pick_pos)
const finish = new THREE.Vector3();
finish.add(place_pos)
let mid = new THREE.Vector3();
mid.add(start);
let dist = finish.x + mid.x;
mid.x = dist/2;
mid.y += 3;
const b_curve = new THREE.QuadraticBezierCurve3(
start,
mid,
finish
);
const points = b_curve.getPoints( 100 );
const line_geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0x0ffffb, linewidth:5 } );
const curve = new THREE.Line( line_geometry, material );
/**
* Cone
*/
const cone_geometry = new THREE.ConeGeometry( 0.2, 1, 8 );
const cone_material = new THREE.MeshBasicMaterial({ color: 0xff00fb });
const cone = new THREE.Mesh( cone_geometry, cone_material );
cone.position.set(points[98].x, points[98].y, points[98].z);
cone.rotateX(Math.PI * points[100].x);
cone.rotateZ(Math.PI * points[100].z);
/**
* Arrow
*/
const arrow = new THREE.Group();
arrow.add(curve);
arrow.add(cone);
arrow.name = 'arrow';
scene.add(arrow);
}
/**
Create the scene, camera, renderer
*/
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x21252d);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 0;
camera.position.y = 8;
camera.position.z = 10;
scene.add(camera);
controls = new THREE.OrbitControls(camera, renderer.domElement);
const pick = new THREE.Vector3(0, 0, 0);
const place = new THREE.Vector3(5, 0, 5);
drawArrow(pick, place, scene);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36425e4453537606180704041806">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a0bca6b1b194e4fae5e6e6fae4">[email protected]</a>/examples/js/controls/OrbitControls.min.js"></script>