three.signal-line is a JavaScript package that provides a signal line component for the popular 3D rendering library, Three.js. It allows you to create animated signal lines in your Three.js scenes with customizable colors, speeds, sizes, and more.
nsp
You can install Three.Signal-Line via npm or yarn:
npm install three.signal-line
or
yarn add three.signal-line
To use Three.Signal-Line, you need to have Three.js already set up in your project. Once you have imported the required dependencies, you can create a signal line by providing the necessary options and a line geometry:
import { SignalLine } from 'three.signal-line';
// Create a Three.js scene
const scene = new THREE.Scene();
// Create options for the SignalLine
const options = {
linePath: [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(2, 2, 2),
],
lineType: LINE_TYPE.NORMAL,
materialOptions: {
color: 0xff0000,
opacity: 1.0,
blending: THREE.NormalBlending,
transparent: true,
depthWrite: true,
lineWidth: 2,
},
isDebug: false,
};
// Create a new SignalLine instance
const signalLine = new SignalLine(options, scene);
To sending signals you should pass signal options by using send
method:
// Define the options for the signal
const options = {
color: '#ff0000',
speed: 200,
size: 30,
backwardMoving: false,
opacity: 0.5,
particleTexture: 'path/to/texture.png', // not required
}
signalLine.send(options);
You can add label by using public addLabel
method:
// Define the options for the signal
const options = {
textOptions: {
color: "#ff0000",
size: 2
},
position: "start",
lookAtCamera: false
};
signalLine.addLabel(options);
You can find the full documentation on the website.
You can see full example in this demo.
or you can try to send it by yourself in another simple demo.
With Three.Signal-Line, you can easily create animated signal lines to enhance the visual experience of your Three.js scenes. Whether you need to visualize data flows, create special effects, or add dynamic elements to your 3D environments, Three.Signal-Line provides a flexible and customizable solution. Explore the package documentation and examples to unleash your creativity and bring your Three.js projects to life with stunning signal lines.
Generated using TypeDoc