113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
import { CylinderGeometry, DoubleSide, Mesh, MeshStandardMaterial, Vector2, Vector3 } from 'three'
|
|
import { createBezierMeshMaterial } from './BezierMeshMaterial.js'
|
|
|
|
let geometry = null
|
|
|
|
const defaultBaseMaterial = /*#__PURE__*/new MeshStandardMaterial({color: 0xffffff, side: DoubleSide})
|
|
|
|
|
|
/**
|
|
* A ThreeJS `Mesh` that bends a tube shape along a 3D cubic bezier path. The bending is done
|
|
* by deforming a straight cylindrical geometry in the vertex shader based on a set of four
|
|
* control point uniforms. It patches the necessary GLSL into the mesh's assigned `material`
|
|
* automatically.
|
|
*
|
|
* The cubiz bezier path is determined by its four `Vector3` properties:
|
|
* - `pointA`
|
|
* - `controlA`
|
|
* - `controlB`
|
|
* - `pointB`
|
|
*
|
|
* The tube's radius is controlled by its `radius` property, which defaults to `0.01`.
|
|
*
|
|
* You can also give the tube a dashed appearance with two properties:
|
|
*
|
|
* - `dashArray` - an array of two numbers, defining the length of "on" and "off" parts of
|
|
* the dash. Each is a 0-1 ratio of the entire path's length. (Actually this is the `t` length
|
|
* used as input to the cubic bezier function, not its visible length.)
|
|
* - `dashOffset` - offset of where the dash starts. You can animate this to make the dashes move.
|
|
*
|
|
* Note that the dashes will appear like a hollow tube, not solid. This will be more apparent on
|
|
* thicker tubes.
|
|
*
|
|
* TODO: proper geometry bounding sphere and raycasting
|
|
* TODO: allow control of the geometry's segment counts
|
|
*/
|
|
class BezierMesh extends Mesh {
|
|
static getGeometry() {
|
|
return geometry || (geometry =
|
|
new CylinderGeometry(1, 1, 1, 6, 64).translate(0, 0.5, 0)
|
|
)
|
|
}
|
|
|
|
constructor() {
|
|
super(
|
|
BezierMesh.getGeometry(),
|
|
defaultBaseMaterial
|
|
)
|
|
|
|
this.pointA = new Vector3()
|
|
this.controlA = new Vector3()
|
|
this.controlB = new Vector3()
|
|
this.pointB = new Vector3()
|
|
this.radius = 0.01
|
|
this.dashArray = new Vector2()
|
|
this.dashOffset = 0
|
|
|
|
// TODO - disabling frustum culling until I figure out how to customize the
|
|
// geometry's bounding sphere that gets used
|
|
this.frustumCulled = false
|
|
}
|
|
|
|
// Handler for automatically wrapping the base material with our upgrades. We do the wrapping
|
|
// lazily on _read_ rather than write to avoid unnecessary wrapping on transient values.
|
|
get material() {
|
|
let derivedMaterial = this._derivedMaterial
|
|
const baseMaterial = this._baseMaterial || this._defaultMaterial || (this._defaultMaterial = defaultBaseMaterial.clone())
|
|
if (!derivedMaterial || derivedMaterial.baseMaterial !== baseMaterial) {
|
|
derivedMaterial = this._derivedMaterial = createBezierMeshMaterial(baseMaterial)
|
|
// dispose the derived material when its base material is disposed:
|
|
baseMaterial.addEventListener('dispose', function onDispose() {
|
|
baseMaterial.removeEventListener('dispose', onDispose)
|
|
derivedMaterial.dispose()
|
|
})
|
|
}
|
|
return derivedMaterial
|
|
}
|
|
set material(baseMaterial) {
|
|
this._baseMaterial = baseMaterial
|
|
}
|
|
|
|
// Create and update material for shadows upon request:
|
|
get customDepthMaterial() {
|
|
return this.material.getDepthMaterial()
|
|
}
|
|
set customDepthMaterial(m) {
|
|
// future: let the user override with their own?
|
|
}
|
|
get customDistanceMaterial() {
|
|
return this.material.getDistanceMaterial()
|
|
}
|
|
set customDistanceMaterial(m) {
|
|
// future: let the user override with their own?
|
|
}
|
|
|
|
onBeforeRender() {
|
|
const {uniforms} = this.material
|
|
const {pointA, controlA, controlB, pointB, radius, dashArray, dashOffset} = this
|
|
uniforms.pointA.value.copy(pointA)
|
|
uniforms.controlA.value.copy(controlA)
|
|
uniforms.controlB.value.copy(controlB)
|
|
uniforms.pointB.value.copy(pointB)
|
|
uniforms.radius.value = radius
|
|
uniforms.dashing.value.set(dashArray.x, dashArray.y, dashOffset || 0)
|
|
}
|
|
|
|
raycast(/*raycaster, intersects*/) {
|
|
// TODO - just fail for now
|
|
}
|
|
}
|
|
|
|
|
|
export { BezierMesh }
|