commit 9630f59b0f26c50b3816e215e6317e509f78296c
parent e262f9378562cb5fd8e0add398d9a05d84267356
Author: Martin Klöckner <mjkloeckner@gmail.com>
Date: Wed, 26 Jun 2024 11:47:53 -0300
flatten `railsFoundationShape` and code cleanup
Diffstat:
| M | tp/src/rails.js | | | 234 | +++++++++++++++++++++++++++++++++---------------------------------------------- |
1 file changed, 97 insertions(+), 137 deletions(-)
diff --git a/tp/src/rails.js b/tp/src/rails.js
@@ -18,119 +18,6 @@ const textures = {
durmientes: { url: '/assets/durmientes.jpg', object: null },
};
-// `position` es de tipo `THREE.Vector3` y representa la translacion de la
-// forma del rail con respecto al origen del sist. de coordenadas de modelado
-function getParametricRailsFunction(radius, position) {
- return function parametricRails(u, v, target) {
- const rotMatrix = new THREE.Matrix4();
- const translationMatrix = new THREE.Matrix4();
- const levelMatrix = new THREE.Matrix4();
-
- let railsShape = new THREE.Vector3();
-
- let railsPathPos = railsPath.getPointAt(v);
- let railsShapePos = new THREE.Vector3(
- Math.cos(u*6.28) + position.x,
- position.y,
- Math.sin(u*6.28) + position.z);
-
- railsShapePos.multiplyScalar(0.1*railsRadius);
-
- let tangente = new THREE.Vector3();
- let binormal = new THREE.Vector3();
- let normal = new THREE.Vector3();
-
- // https://threejs.org/docs/index.html?q=curve#api/en/extras/core/Curve.getTangent
- tangente = railsPath.getTangentAt(v);
- binormal = new THREE.Vector3(0, 1, 0);
- normal.crossVectors(tangente, binormal);
-
- translationMatrix.makeTranslation(railsPathPos);
-
- rotMatrix.identity();
- levelMatrix.identity();
-
- levelMatrix.makeTranslation(railsPathPos);
- rotMatrix.makeBasis(normal, tangente, binormal);
- levelMatrix.multiply(rotMatrix);
- railsShapePos.applyMatrix4(levelMatrix);
-
- const x = railsShapePos.x;
- const y = railsShapePos.y;
- const z = railsShapePos.z;
- target.set(x, y, z);
- }
-}
-
-function parametricRailsFoundationInverted(u, v, target) {
- const rotMatrix = new THREE.Matrix4();
- const translationMatrix = new THREE.Matrix4();
- const levelMatrix = new THREE.Matrix4();
-
- let railsPathPos = railsPath.getPointAt(v);
- let railsFoundationShapePos = railsFoundationShape.getPointAt(u).multiplyScalar(0.5);
-
- let tangente = new THREE.Vector3();
- let binormal = new THREE.Vector3();
- let normal = new THREE.Vector3();
-
- tangente = railsPath.getTangent(v);
-
- tangente.normalize();
- binormal = new THREE.Vector3(0, 1, 0);
- normal.crossVectors(tangente, binormal);
-
- translationMatrix.makeTranslation(railsPathPos);
-
- rotMatrix.identity();
- levelMatrix.identity();
-
- levelMatrix.makeTranslation(railsPathPos);
- rotMatrix.makeBasis(normal, tangente, binormal);
- levelMatrix.multiply(rotMatrix);
- railsFoundationShapePos.applyMatrix4(levelMatrix);
-
- const x = railsFoundationShapePos.x;
- const y = railsFoundationShapePos.y;
- const z = railsFoundationShapePos.z;
- target.set(x, y, z);
-}
-
-
-function parametricRailsFoundation(u, v, target) {
- const rotMatrix = new THREE.Matrix4();
- const translationMatrix = new THREE.Matrix4();
- const levelMatrix = new THREE.Matrix4();
-
- let railsPathPos = railsPath.getPointAt(u);
- let railsFoundationShapePos = railsFoundationShape.getPointAt(v).multiplyScalar(0.5);
-
- let tangente = new THREE.Vector3();
- let binormal = new THREE.Vector3();
- let normal = new THREE.Vector3();
-
- tangente = railsPath.getTangent(u);
-
- tangente.normalize();
- binormal = new THREE.Vector3(0, 1, 0);
- normal.crossVectors(tangente, binormal);
-
- translationMatrix.makeTranslation(railsPathPos);
-
- rotMatrix.identity();
- levelMatrix.identity();
-
- levelMatrix.makeTranslation(railsPathPos);
- rotMatrix.makeBasis(normal, tangente, binormal);
- levelMatrix.multiply(rotMatrix);
- railsFoundationShapePos.applyMatrix4(levelMatrix);
-
- const x = railsFoundationShapePos.x;
- const y = railsFoundationShapePos.y;
- const z = railsFoundationShapePos.z;
- target.set(x, y, z);
-}
-
function onResize() {
camera.aspect = container.offsetWidth / container.offsetHeight;
camera.updateProjectionMatrix();
@@ -145,8 +32,10 @@ function setupThreeJs() {
renderer.setClearColor(0x606060);
container.appendChild(renderer.domElement);
- camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
- camera.position.set(-50, 60, 50);
+ camera = new THREE.PerspectiveCamera(
+ 35, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+ camera.position.set(-10, 15, -10);
camera.lookAt(0, 0, 0);
const controls = new OrbitControls(camera, renderer.domElement);
@@ -171,10 +60,6 @@ function setupThreeJs() {
onResize();
}
-function buildScene() {
- console.log('Building scene');
-}
-
function onTextureLoaded(key, texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
textures[key].object = texture;
@@ -204,39 +89,68 @@ function loadTextures(callback) {
}
}
+function parametricRailsFoundationFunction(u, v, target) {
+ const rotMatrix = new THREE.Matrix4();
+ const translationMatrix = new THREE.Matrix4();
+ const levelMatrix = new THREE.Matrix4();
+
+ let railsPathPos = railsPath.getPointAt(v);
+ let railsFoundationShapePos = railsFoundationShape.getPointAt(u);
+ // TODO: make `railsFoundationShape` smaller and remove this multiplication
+ railsFoundationShapePos.multiplyScalar(0.5);
+
+ let tangente = new THREE.Vector3();
+ let binormal = new THREE.Vector3();
+ let normal = new THREE.Vector3();
+
+ tangente = railsPath.getTangent(v);
+
+ tangente.normalize();
+ binormal = new THREE.Vector3(0, 1, 0);
+ normal.crossVectors(tangente, binormal);
+
+ translationMatrix.makeTranslation(railsPathPos);
+
+ rotMatrix.identity();
+ levelMatrix.identity();
+
+ levelMatrix.makeTranslation(railsPathPos);
+ rotMatrix.makeBasis(normal, tangente, binormal);
+ levelMatrix.multiply(rotMatrix);
+ railsFoundationShapePos.applyMatrix4(levelMatrix);
+
+ const x = railsFoundationShapePos.x;
+ const y = railsFoundationShapePos.y;
+ const z = railsFoundationShapePos.z;
+ target.set(x, y, z);
+}
+
function buildRailsFoundation() {
railsFoundationShape = new THREE.CatmullRomCurve3([
new THREE.Vector3( -2.00, 0.00, 0.00),
- new THREE.Vector3( -1.00, 0.00, 1.00),
- new THREE.Vector3( 0.00, 0.00, 1.15),
- new THREE.Vector3( 1.00, 0.00, 1.00),
+ new THREE.Vector3( -1.00, 0.00, 0.50),
+ new THREE.Vector3( 0.00, 0.00, 0.55),
+ new THREE.Vector3( 1.00, 0.00, 0.50),
new THREE.Vector3( 2.00, 0.00, 0.00),
], false);
- /*
// show rails foundation shape
const points = railsFoundationShape.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(geometry, lineMaterial);
scene.add(curveObject);
- */
- /*
- const pGeometry = new ParametricGeometry(parametricRailsFoundation, 100, 10);
- */
- const pGeometry = new ParametricGeometry(parametricRailsFoundationInverted, 100, 100);
+ const pGeometry = new ParametricGeometry(
+ parametricRailsFoundationFunction, 100, 100);
textures.durmientes.object.wrapS = THREE.RepeatWrapping;
textures.durmientes.object.wrapT = THREE.RepeatWrapping;
- textures.durmientes.object.repeat.set(1, 45);
+ textures.durmientes.object.repeat.set(1, 60);
textures.durmientes.object.anisotropy = 16;
- // textures.durmientes.object.rotation = Math.PI/2;
/*
- const pGeometry = new ParametricGeometry(parametricRailsFoundationInverted, 100, 100);
-
- // load into `map` the examples texture
+ // load into `map` the example texture
const map = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.repeat.set(1, 30);
@@ -255,15 +169,59 @@ function buildRailsFoundation() {
scene.add(pMesh);
}
-const railsRadius = 0.5;
+// `position` es de tipo `THREE.Vector3` y representa la translacion de la
+// forma del rail con respecto al origen del sist. de coordenadas de modelado
+function getParametricRailsFunction(radius, position) {
+ return function parametricRails(u, v, target) {
+ const rotMatrix = new THREE.Matrix4();
+ const translationMatrix = new THREE.Matrix4();
+ const levelMatrix = new THREE.Matrix4();
+
+ let railsShape = new THREE.Vector3();
+
+ let railsPathPos = railsPath.getPointAt(v);
+ let railsShapePos = new THREE.Vector3(
+ Math.cos(u*6.28) + position.x,
+ position.y,
+ Math.sin(u*6.28) + position.z);
+
+ railsShapePos.multiplyScalar(0.1*railsRadius);
+
+ let tangente = new THREE.Vector3();
+ let binormal = new THREE.Vector3();
+ let normal = new THREE.Vector3();
+
+ // https://threejs.org/docs/index.html?q=curve#api/en/extras/core/Curve.getTangent
+ tangente = railsPath.getTangentAt(v);
+ binormal = new THREE.Vector3(0, 1, 0);
+ normal.crossVectors(tangente, binormal);
+
+ translationMatrix.makeTranslation(railsPathPos);
+
+ rotMatrix.identity();
+ levelMatrix.identity();
+
+ levelMatrix.makeTranslation(railsPathPos);
+ rotMatrix.makeBasis(normal, tangente, binormal);
+ levelMatrix.multiply(rotMatrix);
+ railsShapePos.applyMatrix4(levelMatrix);
+
+ const x = railsShapePos.x;
+ const y = railsShapePos.y;
+ const z = railsShapePos.z;
+ target.set(x, y, z);
+ }
+}
+
+const railsRadius = 0.35;
function buildRails() {
let railsGeometries = [];
const leftRailGeometryFunction = getParametricRailsFunction(railsRadius,
- new THREE.Vector3( 6, 0, railsRadius+11.25));
+ new THREE.Vector3( 6, 0, railsRadius+8));
const rightRailGeometryFunction = getParametricRailsFunction(railsRadius,
- new THREE.Vector3(-7, 0, railsRadius+11.25));
+ new THREE.Vector3(-6, 0, railsRadius+8));
const leftRailGeometry = new ParametricGeometry(leftRailGeometryFunction, 100, 500);
const rightRailGeometry = new ParametricGeometry(rightRailGeometryFunction, 100, 500);
@@ -290,7 +248,6 @@ function mainLoop() {
}
function main() {
- // buildScene();
railsPath = new THREE.CatmullRomCurve3([
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3( 10, 0, 10),
@@ -298,11 +255,14 @@ function main() {
new THREE.Vector3(-10, 0, -10),
], true);
+ /*
+ // muestra la curva utilizada para el camino de `rails`
const railsPathPoints = railsPath.getPoints(50);
const railsPathGeometry = new THREE.BufferGeometry().setFromPoints(railsPathPoints);
const railsPathMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
const railsPathMesh = new THREE.Line(railsPathGeometry, railsPathMaterial);
scene.add(railsPathMesh);
+ */
buildRailsFoundation();
buildRails();
