Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shawn0326/three.path
three.path is a three.js extension which provides a 3D path geometry builder.
https://github.com/shawn0326/three.path
Last synced: 4 days ago
JSON representation
three.path is a three.js extension which provides a 3D path geometry builder.
- Host: GitHub
- URL: https://github.com/shawn0326/three.path
- Owner: shawn0326
- License: mit
- Created: 2018-05-09T09:59:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T00:48:48.000Z (3 months ago)
- Last Synced: 2024-12-15T13:05:14.209Z (11 days ago)
- Language: JavaScript
- Size: 2.1 MB
- Stars: 131
- Watchers: 3
- Forks: 43
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
three.path
===================
`three.path` is an extension for `three.js` that facilitates the creation of 3D path geometries.
### Usage
##### Step1: Create PathPointList to preprocess and store points.
````javascript
const list = new THREE.PathPointList();
/**
* set points
* @param {THREE.Vector3[]} points key points array
* @param {number} cornerRadius? the corner radius. set 0 to disable round corner. default is 0.1
* @param {number} cornerSplit? the corner split. default is 10.
* @param {number} up? force up. default is auto up (calculate by tangent).
* @param {boolean} close? close path. default is false.
*/
list.set(points, 0.1, 10, undefined, false);
````
##### Step2 Generate geometries
Generate PathGeometry.
````javascript
/**
* @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
* @param {Boolean} [generateUv2=false]
*/
// new THREE.PathGeometry()
// Init by max vertex
const geometry = new THREE.PathGeometry(2000, false);
// Init by data
const geometry = new THREE.PathGeometry({
pathPointList: pathPointList,
options: {
width: 0.1, // default is 0.1
arrow: true, // default is true
progress: 1, // default is 1
side: "both" // "left"/"right"/"both", default is "both"
},
usage: THREE.StaticDrawUsage // geometry usage
}, false);
// Update geometry when pathPointList changed
geometry.update(pathPointList, {
width: 0.1, // default is 0.1
arrow: true, // default is true
progress: 1, // default is 1
side: "both" // "left"/"right"/"both", default is "both"
});
````
Or generate PathTubeGeometry.
````javascript
/**
* @param {Object|Number} initData - If initData is number, geometry init by empty data and set it as the max vertex. If initData is Object, it contains pathPointList and options.
* @param {Boolean} [generateUv2=false]
*/
// new THREE.PathTubeGeometry()
// Init by max vertex
const geometry = new THREE.PathTubeGeometry(2000, false);
// Init by data
const geometry = new THREE.PathTubeGeometry({
pathPointList: pathPointList,
options: {
radius: 0.1, // default is 0.1
radialSegments: 8, // default is 8
progress: 1, // default is 1
startRad: 0 // default is 0
},
usage: THREE.StaticDrawUsage // geometry usage
}, false);
// update geometry when pathPointList changed
geometry.update(pathPointList, {
radius: 0.1, // default is 0.1
radialSegments: 8, // default is 8
progress: 1, // default is 1
startRad: 0 // default is 0
});
````
### demo
##### draw path
path geometry build from pathPointList. ->> [tube](https://shawn0326.github.io/three.path/examples/index.html)
##### tube
path tube geometry build from pathPointList. ->> [tube](https://shawn0326.github.io/three.path/examples/tube.html)
##### city
[City](https://shawn0326.github.io/three.path/examples/city.html)
### build
##### first run
````
npm install
````
##### build
````
npm run b
````