Skip to content

Commit 8e7b578

Browse files
Jason717717Jason717717
committed
(feat): add support for initial headings of cars
1 parent 4dac262 commit 8e7b578

3 files changed

Lines changed: 60 additions & 24 deletions

File tree

‎GEMstack/onboard/visualization/sr_viz/threeD/components/Car.js‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ export const CAR_HEIGHT = CAR_Y * SCALE_RATE;
99
export const CAR_LENGTH = CAR_Z * SCALE_RATE;
1010

1111
export class Car {
12-
constructor(modelPath, position = { x: 0, y: 0, z: 0 }, onLoadCallback) {
12+
constructor(modelPath, position = { x: 0, y: 0, z: 0 }, heading = Math.PI / 2, onLoadCallback) {
1313
this.position = new THREE.Vector3(position.x, position.y, position.z);
14-
this.heading = Math.PI / 2;
14+
this.heading = heading;
1515
this.velocity = 0;
16-
this.wheelBase = CAR_LENGTH * 5 / 8; // Distance between front and rear axles
16+
this.wheelBase = CAR_LENGTH * 5 / 8;
1717
this.maxSpeed = 20;
1818
this.acceleration = 0.5;
1919
this.friction = 0.98;
@@ -27,6 +27,7 @@ export class Car {
2727
this.group = gltf.scene;
2828
this.group.position.set(this.position.x, this.position.y, this.position.z);
2929
this.group.scale.set(SCALE_RATE, SCALE_RATE, SCALE_RATE);
30+
this.group.rotation.y = this.heading;
3031

3132
if (onLoadCallback) onLoadCallback(this);
3233
},
@@ -42,41 +43,41 @@ export class Car {
4243
if (keys.backward) this.velocity = Math.max(this.velocity - this.acceleration, -this.maxSpeed);
4344
this.velocity *= this.friction;
4445

45-
if (keys.left) this.steerAngle = Math.max(this.steerAngle - 0.02, -this.maxSteerAngle);
46-
if (keys.right) this.steerAngle = Math.min(this.steerAngle + 0.02, this.maxSteerAngle);
46+
if (keys.right) this.steerAngle = Math.max(this.steerAngle - 0.02, -this.maxSteerAngle);
47+
if (keys.left) this.steerAngle = Math.min(this.steerAngle + 0.02, this.maxSteerAngle);
4748
if (!keys.left && !keys.right) this.steerAngle *= 0.9;
4849

4950
const frontWheel = this.position.clone().add(new THREE.Vector3(
50-
Math.cos(this.heading) * (this.wheelBase / 2) + Math.sin(this.heading) * (CAR_WIDTH / 2),
51+
Math.sin(this.heading) * (this.wheelBase / 2) - Math.cos(this.heading) * (CAR_WIDTH / 2),
5152
0,
52-
Math.sin(this.heading) * (this.wheelBase / 2) - Math.cos(this.heading) * (CAR_WIDTH / 2)
53+
Math.cos(this.heading) * (this.wheelBase / 2) + Math.sin(this.heading) * (CAR_WIDTH / 2)
5354
));
5455
const backWheel = this.position.clone().add(new THREE.Vector3(
55-
-Math.cos(this.heading) * (this.wheelBase / 2) + Math.sin(this.heading) * (CAR_WIDTH / 2),
56+
-Math.sin(this.heading) * (this.wheelBase / 2) - Math.cos(this.heading) * (CAR_WIDTH / 2),
5657
0,
57-
-Math.sin(this.heading) * (this.wheelBase / 2) - Math.cos(this.heading) * (CAR_WIDTH / 2)
58+
-Math.cos(this.heading) * (this.wheelBase / 2) + Math.sin(this.heading) * (CAR_WIDTH / 2)
5859
));
5960

6061
backWheel.add(new THREE.Vector3(
61-
Math.cos(this.heading) * this.velocity * dt,
62+
Math.sin(this.heading) * this.velocity * dt,
6263
0,
63-
Math.sin(this.heading) * this.velocity * dt
64+
Math.cos(this.heading) * this.velocity * dt
6465
));
6566
frontWheel.add(new THREE.Vector3(
66-
Math.cos(this.heading + this.steerAngle) * this.velocity * dt,
67+
Math.sin(this.heading + this.steerAngle) * this.velocity * dt,
6768
0,
68-
Math.sin(this.heading + this.steerAngle) * this.velocity * dt
69+
Math.cos(this.heading + this.steerAngle) * this.velocity * dt
6970
));
7071

7172
this.position = frontWheel.clone().add(backWheel).multiplyScalar(0.5).add(new THREE.Vector3(
72-
-Math.sin(this.heading) * (CAR_WIDTH / 2),
73+
Math.cos(this.heading) * (CAR_WIDTH / 2),
7374
0,
74-
Math.cos(this.heading) * (CAR_WIDTH / 2)
75+
-Math.sin(this.heading) * (CAR_WIDTH / 2)
7576
));
76-
this.heading = Math.atan2(frontWheel.z - backWheel.z, frontWheel.x - backWheel.x);
77+
this.heading = Math.atan2(frontWheel.x - backWheel.x, frontWheel.z - backWheel.z);
7778

7879
this.group.position.copy(this.position);
79-
this.group.rotation.y = -this.heading + Math.PI / 2;
80+
this.group.rotation.y = this.heading;
8081
}
8182

8283

‎GEMstack/onboard/visualization/sr_viz/threeD/components/Human.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export default class Human {
3838
this.group.add(this.leftShoulderPivot);
3939

4040
this.leftArm = new THREE.Mesh(armGeometry, armMaterial);
41-
// this.leftArm.position.set(0, -HUMAN_ARM_LENGTH / 2, 0);
4241
this.leftShoulderPivot.add(this.leftArm);
4342

4443
this.rightShoulderPivot = new THREE.Group();
@@ -50,7 +49,6 @@ export default class Human {
5049
this.group.add(this.rightShoulderPivot);
5150

5251
this.rightArm = new THREE.Mesh(armGeometry, armMaterial);
53-
// this.rightArm.position.set(0, -HUMAN_ARM_LENGTH / 2, 0);
5452
this.rightShoulderPivot.add(this.rightArm);
5553

5654
const legGeometry = new THREE.CylinderGeometry(HUMAN_LEG_LENGTH / 6, HUMAN_LEG_LENGTH / 6, HUMAN_LEG_LENGTH);

‎GEMstack/onboard/visualization/sr_viz/threeD/components/RoadVehicleViz.vue‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@ onMounted(() => {
3939
window.addEventListener("keypress", handleKeyPress);
4040
4141
initScene();
42-
car = createCar(0, 0, 0);
42+
car = createCar(0, 0, 0, Math.PI / 2);
4343
for (let i = 0; i < 4; i++) {
4444
const offset = (i + 1) * 10;
4545
createCar(
46-
(i % 2 === 0 ? -1 : 1) * (Math.random() * 5 + offset),
46+
offset,
4747
0,
48-
offset
48+
(i % 2 === 0 ? -1 : 1) * (Math.random() * 5),
49+
Math.PI / 2
4950
);
5051
}
5152
createTrafficLight(0, 0, 5);
@@ -54,8 +55,8 @@ onMounted(() => {
5455
animate();
5556
});
5657
57-
function createCar(x, y, z) {
58-
const newCar = new Car(CAR_MODEL_PATH, { x: x, y: y, z: z }, loadCallBack);
58+
function createCar(x, y, z, heading) {
59+
const newCar = new Car(CAR_MODEL_PATH, { x: x, y: y, z: z }, heading, loadCallBack);
5960
cars.push(newCar);
6061
return newCar;
6162
}
@@ -175,6 +176,7 @@ function initScene() {
175176
176177
window.addEventListener("resize", onWindowResize, false);
177178
}
179+
178180
function loadRoad() {
179181
const textureLoader = new THREE.TextureLoader();
180182
@@ -205,6 +207,41 @@ function loadRoad() {
205207
roadMesh.position.set(0, 0, 0);
206208
207209
scene.add(roadMesh);
210+
211+
createRoadLines();
212+
}
213+
214+
function createRoadLines() {
215+
const lineMaterialSolid = new THREE.LineBasicMaterial({ color: 0xffff00 });
216+
const lineMaterialDashed = new THREE.LineDashedMaterial({
217+
color: 0xffffff,
218+
dashSize: 5,
219+
gapSize: 5,
220+
});
221+
222+
const roadWidth = 20;
223+
224+
const centerLineGeometry = new THREE.BufferGeometry().setFromPoints([
225+
new THREE.Vector3(-500, 0.1, 0),
226+
new THREE.Vector3(500, 0.1, 0),
227+
]);
228+
const centerLine = new THREE.Line(centerLineGeometry, lineMaterialDashed);
229+
centerLine.computeLineDistances();
230+
scene.add(centerLine);
231+
232+
const leftLineGeometry = new THREE.BufferGeometry().setFromPoints([
233+
new THREE.Vector3(-500, 0.1, roadWidth / 2),
234+
new THREE.Vector3(500, 0.1, roadWidth / 2),
235+
]);
236+
const leftLine = new THREE.Line(leftLineGeometry, lineMaterialSolid);
237+
scene.add(leftLine);
238+
239+
const rightLineGeometry = new THREE.BufferGeometry().setFromPoints([
240+
new THREE.Vector3(-500, 0.1, -roadWidth / 2),
241+
new THREE.Vector3(500, 0.1, -roadWidth / 2),
242+
]);
243+
const rightLine = new THREE.Line(rightLineGeometry, lineMaterialSolid);
244+
scene.add(rightLine);
208245
}
209246
210247
function updateCamera() {

0 commit comments

Comments
 (0)