Draw a line from an object in the direction of the camera

Hey,

i want to create a Component that draws a line away from a object with a fixed distance in the direction in which the camera is looking.
So if i “fly” around the object with my camera the line should be drawn to the opposite direction of the camera . the height of the camera shouldnt matter the line should always be
drawn parallel to the ground. The final purpose for this is that i want to shoot the sphere in the direction the camera is facing when i click it. The line
will be a indicator in which direction it will go with the current camera position.
I messed around with the Gizmo.DrawLine method and managed to draw a line at least. I also tried to grab the camera direction with this.context.mainCamera?.getWorldDirection
and messed around with some vector math but it always turned to be out to be rubbish :frowning_with_open_mouth:
any idea how it can be achieved?

Original Post on Discord

by user 313407509618622466

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Here is what I found for you :brain: Discord

To create a Component that draws a line away from an object in the opposite direction to where the camera is looking, you can follow these steps:

  1. Create a new component class extending Behaviour
  2. Use the start method to initialize any required variables and components
  3. In the update method, calculate the direction opposite the camera’s looking direction and create a line with Gizmo.DrawLine
  4. Ensure the line is drawn parallel to the ground by zeroing the y-component of the direction vector

Let’s draft out the component:

*thread_jS1E61RlBgSC16QxJcREl7sx*

typescript
// Import necessary classes from three.js and Needle Engine
import { Vector3, Color } from “three”;
import { Behaviour, Gizmo, Camera } from “@needle-tools/engine”;

// Extend Behaviour to create a custom component
export class OppositeCameraDirectionIndicator extends Behaviour {
// Public property to set the line length and color in the editor
lineLength: number = 5;
lineColor: Color = new Color(“red”);

// A reference to the main camera
private mainCamera: Camera;

// Lifecycle method called when script is loaded
awake() {
    this.mainCamera = this.context.mainCameraComponent;
}

// Lifecycle method called every frame
update() {
    if (!this.mainCamera) return;
    
    // Get the world direction the camera is facing
    const cameraDirection = new Vector3();
    this.mainCamera.getWorldDirection(cameraDirection);
    
    // Make the direction vector parallel to the ground by setting y to 0
    cameraDirection.y = 0;
    
    // The opposite direction to where the camera is looking
    const oppositeDirection = cameraDirection.negate().normalize();
    
    // Start point of the line is the position of the GameObject this component is attached to
    const start = this.gameObject.worldPosition; 
    
    // Calculate the end point using the direction and the line length
    const end = start.clone().add(oppositeDirection.multiplyScalar(this.lineLength));
    
    // Draw the line using Gizmo.DrawLine
    Gizmo.DrawLine(start, end, this.lineColor);
}

}

*thread_jS1E61RlBgSC16QxJcREl7sx*

This component will draw a line originating from the GameObject it is attached to and extending in the opposite direction from where the camera is facing. Remember to attach this component to the desired GameObject through the editor, and adjust the lineLength and lineColor properties as needed.

1 messages left GPT 4
thread_jS1E61RlBgSC16QxJcREl7sx
Thanks for your feedback!

ah ok got it working “okay” for now. i used the camera position, set it y to 0, normalized and inverted it, multiplied with a scalar and took it as parameter for drawLine. The engine assistant was very helpful for that

by user 313407509618622466