You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
12 KiB
390 lines
12 KiB
import * as THREE from "three";
|
|
import {CSG} from "three-csg-ts";
|
|
//@ts-ignore
|
|
import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js'
|
|
import gsap from "gsap";
|
|
|
|
export default class Cl23dObject extends THREE.Object3D {
|
|
|
|
// 创建ptr的底座
|
|
private static createPtrPedestal(): THREE.BufferGeometry {
|
|
// 参数配置
|
|
const radius = 0.8; // 圆半径
|
|
const lineDist = 0.75; // 切割线距离圆心距离
|
|
const segments = 64; // 圆的分段精度
|
|
|
|
// 计算切割线与圆的交点
|
|
const intersectY = Math.sqrt(radius*radius - lineDist*lineDist);
|
|
const startAngle = Math.asin(intersectY/radius);
|
|
const endAngle = Math.acos(intersectY/radius);
|
|
|
|
|
|
const shape = new THREE.Shape();
|
|
shape.moveTo(0, 0); // 起点在圆心
|
|
shape.absarc(0, 0, 0.8, startAngle, endAngle, false); // 从0到π绘制半圆
|
|
shape.absarc(0, 0, 0.8, startAngle + Math.PI/2, endAngle + Math.PI/2, false);
|
|
shape.absarc(0, 0, 0.8, startAngle + Math.PI, endAngle + Math.PI, false);
|
|
shape.absarc(0, 0, 0.8, startAngle + Math.PI/2 * 3, endAngle + Math.PI/2 * 3, false);
|
|
|
|
shape.lineTo(-0.5, -intersectY)
|
|
shape.lineTo(-0.5, -intersectY + 0.17)
|
|
shape.lineTo(0.75, -intersectY + 0.17)
|
|
shape.lineTo(0.75, intersectY - 0.17)
|
|
shape.lineTo(-0.5, intersectY - 0.17)
|
|
shape.lineTo(-0.5, intersectY)
|
|
shape.closePath(); // 闭合路径
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.22, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelEnabled: false,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
|
|
mesh.updateMatrix()
|
|
|
|
// 倒角
|
|
const shapeD = new THREE.Shape();
|
|
shapeD.moveTo(-0.02, -0.02);
|
|
shapeD.lineTo(0.02, 0.02)
|
|
shapeD.lineTo(-0.02, 0.02)
|
|
shapeD.closePath()
|
|
|
|
const curveD = new THREE.EllipseCurve(
|
|
0, 0, radius, radius, 0, Math.PI * 2, false, 0
|
|
);
|
|
// 生成拉伸路径点
|
|
const pointsD = curveD.getPoints(segments).map(p =>
|
|
new THREE.Vector3(p.x, 0.20, p.y)
|
|
);
|
|
// 3. 挤出成型
|
|
const optionsD = {
|
|
steps: segments,
|
|
bevelEnabled: false,
|
|
// bevelSegments: 0.01,
|
|
extrudePath: new THREE.CatmullRomCurve3(pointsD)
|
|
};
|
|
|
|
const geometryD = new THREE.ExtrudeGeometry(shapeD, optionsD)
|
|
const meshD = new THREE.Mesh(geometryD, material);
|
|
meshD.updateMatrix()
|
|
|
|
// 布尔运算
|
|
const result = CSG.subtract(mesh, meshD)
|
|
|
|
return result.geometry
|
|
}
|
|
|
|
// 创建ptr的立柱
|
|
private static createPtrPillar(): THREE.BufferGeometry {
|
|
// 606.5
|
|
const width = 0.245
|
|
const depth = 0.716
|
|
const dd = 0.05
|
|
const shape = new THREE.Shape();
|
|
shape.moveTo(-0.728, -0.358 + dd);
|
|
shape.lineTo(-0.728 + dd, -0.358);
|
|
shape.lineTo(-0.728 + width - dd, -0.358);
|
|
shape.lineTo(-0.728 + width, -0.358 + dd);
|
|
|
|
shape.lineTo(-0.728 + width, -0.28);
|
|
shape.lineTo(-0.728 + width - 0.08, -0.28);
|
|
shape.lineTo(-0.728 + width - 0.08, 0.28);
|
|
shape.lineTo(-0.728 + width, 0.28);
|
|
|
|
shape.lineTo(-0.728 + width, -0.358 + depth - dd);
|
|
shape.lineTo(-0.728 + width - dd, -0.358 + depth);
|
|
shape.lineTo(-0.728 + dd, -0.358 + depth);
|
|
shape.lineTo(-0.728, -0.358 + depth - dd);
|
|
// shape.lineTo(-0.728, -0.358 + dd);
|
|
// shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.22, 0), new THREE.Vector3(0, 1.872, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
let geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
|
|
|
|
|
|
const fd = 0.03
|
|
const shapeBf = new THREE.Shape();
|
|
|
|
shapeBf.moveTo(-0.728 + width - 0.08, -0.28);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, -0.28);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, -0.25);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.25);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, -0.25 + fd);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, -0.14 - fd);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.14);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, -0.14);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, 0.14);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.14);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, 0.14 + fd);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130, 0.25 - fd);
|
|
shapeBf.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.25);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, 0.25);
|
|
shapeBf.lineTo(-0.728 + width + 0.02, 0.28);
|
|
shapeBf.lineTo(-0.728 + width - 0.08, 0.28);
|
|
|
|
shapeBf.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curveBf = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.06, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const optionsBf = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curveBf // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometryBf = new THREE.ExtrudeGeometry(shapeBf, optionsBf)
|
|
geometry = mergeGeometries([geometry, geometryBf])
|
|
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
|
|
const shapeD = new THREE.Shape();
|
|
shapeD.moveTo(-0.3, -0.25);
|
|
shapeD.lineTo(-0.3, 0.25);
|
|
shapeD.lineTo(0.3, 0.25);
|
|
shapeD.lineTo(0.3, -0.25);
|
|
shapeD.closePath()
|
|
|
|
const curveD = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 1.45, -1), new THREE.Vector3(0, 1.45, 1)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
const optionsD = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curveD // 设置挤出轨迹
|
|
}
|
|
|
|
const geometryD = new THREE.ExtrudeGeometry(shapeD, optionsD)
|
|
const meshD = new THREE.Mesh(geometryD, material);
|
|
mesh.updateMatrix()
|
|
meshD.updateMatrix()
|
|
const result = CSG.subtract(mesh, meshD)
|
|
|
|
return result.geometry
|
|
|
|
}
|
|
|
|
// 创建ptr的立柱
|
|
private static createPtrFork(): THREE.BufferGeometry {
|
|
// 606.5
|
|
const width = 0.245
|
|
const depth = 0.716
|
|
const dd = 0.05
|
|
const fd = 0.03
|
|
const shape = new THREE.Shape();
|
|
|
|
shape.moveTo(-0.728 + width - 0.08, -0.28);
|
|
shape.lineTo(-0.728 + width + 0.02, -0.28);
|
|
shape.lineTo(-0.728 + width + 0.02, -0.27);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.27);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.27 + fd);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130, -0.12 - fd);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, -0.12);
|
|
shape.lineTo(-0.728 + width + 0.02, -0.12);
|
|
shape.lineTo(-0.728 + width + 0.02, 0.12);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.12);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.12 + fd);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130, 0.27 - fd);
|
|
shape.lineTo(-0.728 + width + 0.02 + 1.130 - fd, 0.27);
|
|
shape.lineTo(-0.728 + width + 0.02, 0.27);
|
|
shape.lineTo(-0.728 + width + 0.02, 0.28);
|
|
shape.lineTo(-0.728 + width - 0.08, 0.28);
|
|
|
|
shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curve = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.02, 0), new THREE.Vector3(0, 0.482, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const options = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curve // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometry = new THREE.ExtrudeGeometry(shape, options)
|
|
const material = new THREE.MeshBasicMaterial({color: 0xffdddbca});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
mesh.updateMatrix()
|
|
|
|
const shapeD = new THREE.Shape();
|
|
|
|
|
|
shapeD.moveTo(-0.728 + width + 0.02, -0.3);
|
|
shapeD.lineTo(-0.728 + width + 0.02 + 1.2, -0.3);
|
|
shapeD.lineTo(-0.728 + width + 0.02 + 1.2, 0.3);
|
|
shapeD.lineTo(-0.728 + width + 0.02, 0.3);
|
|
shape.closePath()
|
|
|
|
// 拉伸轨迹线
|
|
const curveD = new THREE.CatmullRomCurve3(
|
|
[new THREE.Vector3(0, 0.07, 0), new THREE.Vector3(0, 0.482, 0)],
|
|
false, // 闭合曲线
|
|
'catmullrom',
|
|
0
|
|
)
|
|
|
|
// 挤出几何图形 参数
|
|
const optionsD = {
|
|
steps: 1,
|
|
bevelSegments: 0.05,
|
|
bevelEnabled: true,
|
|
extrudePath: curveD // 设置挤出轨迹
|
|
}
|
|
// 创建挤出几何体
|
|
const geometryD = new THREE.ExtrudeGeometry(shapeD, optionsD)
|
|
const meshD = new THREE.Mesh(geometryD, material);
|
|
|
|
meshD.updateMatrix()
|
|
|
|
// 布尔运算
|
|
const result = CSG.subtract(mesh, meshD)
|
|
|
|
return result.geometry
|
|
}
|
|
|
|
private static ptrPedestalGeometry: THREE.BufferGeometry = null;
|
|
private static ptrPillarGeometry: THREE.BufferGeometry = null;
|
|
private static ptrForkGeometry: THREE.BufferGeometry = null;
|
|
|
|
constructor(item: ItemJson, option?: RendererCudOption) {
|
|
super();
|
|
if (!Cl23dObject.ptrPedestalGeometry) {
|
|
Cl23dObject.ptrPedestalGeometry = Cl23dObject.createPtrPedestal()
|
|
}
|
|
const ptrPedestalGeometry = Cl23dObject.ptrPedestalGeometry
|
|
const ptrPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca});
|
|
const ptrPedestalMesh = new THREE.Mesh(ptrPedestalGeometry, ptrPedestalMaterial);
|
|
ptrPedestalMesh.name = 'ptrPedestal'
|
|
|
|
if (!Cl23dObject.ptrPillarGeometry) {
|
|
Cl23dObject.ptrPillarGeometry = Cl23dObject.createPtrPillar()
|
|
}
|
|
const ptrPillarGeometry = Cl23dObject.ptrPillarGeometry;
|
|
const ptrPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956});
|
|
const ptrPillarMesh = new THREE.Mesh(ptrPillarGeometry, ptrPillarMaterial);
|
|
|
|
|
|
if (!Cl23dObject.ptrForkGeometry) {
|
|
Cl23dObject.ptrForkGeometry = Cl23dObject.createPtrFork()
|
|
}
|
|
const ptrForkGeometry = Cl23dObject.ptrForkGeometry;
|
|
const ptrForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444});
|
|
const ptrForkMesh = new THREE.Mesh(ptrForkGeometry, ptrForkMaterial);
|
|
ptrForkMesh.name = 'ptrFork'
|
|
|
|
this.add(ptrPedestalMesh)
|
|
const groupPillar = new THREE.Group()
|
|
groupPillar.name = 'ptrPillar'
|
|
groupPillar.add(ptrPillarMesh)
|
|
groupPillar.add(ptrForkMesh)
|
|
this.add(groupPillar)
|
|
}
|
|
|
|
animationShowFork(z: number): Promise<void> {
|
|
|
|
const ptrPillar = this.getObjectByName('ptrPillar')
|
|
const time = 3
|
|
return new Promise(resolve => {
|
|
gsap.to(ptrPillar.position, {
|
|
z: -z,
|
|
duration: time,
|
|
repeat: 0,
|
|
ease: 'sine.inOut',
|
|
onComplete: resolve
|
|
})
|
|
})
|
|
|
|
}
|
|
|
|
animationHideFork(): Promise<void> {
|
|
return this.animationShowFork(0)
|
|
}
|
|
|
|
animationUpFork(y: number, time?: number = 3): Promise<void> {
|
|
const ptrFork = this.getObjectByName('ptrFork')
|
|
const ptrPillar = this.getObjectByName('ptrPillar')
|
|
const pz = ptrPillar.position.z
|
|
return new Promise(resolve => {
|
|
const bh = 0.22
|
|
const children = ptrFork.children
|
|
|
|
gsap.to(ptrFork.position, {
|
|
y: y,
|
|
duration: time,
|
|
repeat: 0,
|
|
ease: 'sine.inOut',
|
|
onComplete: resolve,
|
|
onUpdate: function() {
|
|
const a = this.targets()[0]
|
|
if (a.y < bh) {
|
|
if (pz > -1) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i]
|
|
child.position.y = bh - a.y
|
|
}
|
|
} else if (a.y < 0 ) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i]
|
|
child.position.y = 0 - a.y
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
animationDownFork(): Promise<void> {
|
|
return this.animationUpFork(0)
|
|
}
|
|
|
|
|
|
}
|
|
|