commit 235560be06daa3a0b78365e36c9d98574121a1ff
parent c4f4a4386b7a2b8c1ae1b36b0bc3ebd6ab73de4c
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Mon, 8 Jul 2024 17:18:56 -0300
set `MeshPhongMaterial` side to `THREE.FrontSide`
this removes some of the lines that appears on the shadows of that
objects
Diffstat:
4 files changed, 24 insertions(+), 39 deletions(-)
diff --git a/tp/src/bridge.js b/tp/src/bridge.js
@@ -228,13 +228,10 @@ export function generateBridge(arcCount=1, arcRadius=3,
textures.ladrillos.object.wrapS = THREE.RepeatWrapping;
textures.ladrillos.object.wrapT = THREE.RepeatWrapping;
textures.ladrillos.object.repeat.set(0.75*0.15, 0.75*0.35);
- textures.ladrillos.object.anisotropy = 16;
+ // textures.ladrillos.object.anisotropy = 16;
const bridgeMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
- transparent: false,
- opacity: 1.0,
- shininess: 10,
+ side: THREE.FrontSide,
map: textures.ladrillos.object
});
@@ -280,7 +277,7 @@ export function generateBridge(arcCount=1, arcRadius=3,
cageGeometry.translate(0, bridgeHeight+roadwayHeight-squareTubeRadius*2, 0);
const cageMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
transparent: false,
opacity: 1.0,
shininess: 10,
@@ -308,10 +305,7 @@ export function generateBridge(arcCount=1, arcRadius=3,
textures.tierra.object.anisotropy = 16;
const roadwayFloorMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
- transparent: false,
- opacity: 1.0,
- shininess: 10,
+ side: THREE.FrontSide,
map: textures.tierra.object
});
diff --git a/tp/src/scene.js b/tp/src/scene.js
@@ -316,10 +316,11 @@ function setupThreeJs() {
lights.directional.object = new THREE.DirectionalLight(0xffffff, 1);
lights.directional.object.position.set(-100, 100, 100);
+
// Set up shadow properties for the light
- lights.directional.object.castShadow = true; // default false
- lights.directional.object.shadow.mapSize.width = 512; // default
- lights.directional.object.shadow.mapSize.height = 512; // default
+ lights.directional.object.castShadow = true;
+ lights.directional.object.shadow.mapSize.width = 1024;
+ lights.directional.object.shadow.mapSize.height = 1024;
lights.directional.object.shadow.camera = new THREE.OrthographicCamera(
-65, 65, 65, -40, 0.5, 225);
@@ -499,8 +500,8 @@ function buildLoco() {
//Set up shadow properties for the light
trainLight.castShadow = true; // default false
- trainLight.shadow.mapSize.width = 128; // default
- trainLight.shadow.mapSize.height = 128; // default
+ trainLight.shadow.mapSize.width = 512; // default
+ trainLight.shadow.mapSize.height = 512; // default
trainLight.shadow.camera.near = 0.5; // default
trainLight.shadow.camera.far = 40; // default
trainLight.shadow.focus = 1; // default
@@ -546,10 +547,7 @@ function buildRailsFoundation() {
// map.rotation = Math.PI/2;
const railsFoundationMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
- transparent: false,
- opacity: 1.0,
- shininess: 10,
+ side: THREE.FrontSide,
map: textures.durmientes.object
// map: map
});
@@ -568,10 +566,7 @@ function buildRailsFoundation() {
function buildRails() {
const railsGeometry = buildRailsGeometry();
const railsMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
- transparent: false,
- opacity: 1.0,
- shininess: 10,
+ side: THREE.BackSide,
color: 0xFFFFFF
});
@@ -587,9 +582,7 @@ function buildTerrainCustomMaterial() {
const customMaterial = new THREE.MeshPhongMaterial({
color: 0xffffff,
specular: 0x333333,
- shininess: 10,
- side: THREE.DoubleSide,
- reflectivity: 1
+ side: THREE.FrontSide,
});
// definos las variables uniformes adicionales que necesitamos
@@ -754,6 +747,7 @@ function buildTerrain() {
const customMaterial = buildTerrainCustomMaterial();
terrain = new THREE.Mesh(terrainGeometry, customMaterial);
+ terrain.castShadow = true;
terrain.receiveShadow = true;
scene.add(terrain);
@@ -763,7 +757,7 @@ function buildTerrain() {
console.log('Generating water');
const waterGeometry = new THREE.PlaneGeometry(width/2, height-1.25);
- const waterMaterial = new THREE.MeshPhongMaterial( {color: 0x12ABFF, side: THREE.DoubleSide} );
+ const waterMaterial = new THREE.MeshPhongMaterial( {color: 0x12ABFF, side: THREE.BackSide} );
const water = new THREE.Mesh( waterGeometry, waterMaterial );
water.rotateX(Math.PI/2);
water.position.set(0, 0, -0.65);
@@ -783,10 +777,7 @@ function buildTunnel() {
textures.madera.object.anisotropy = 16;
const tunnelMaterial = new THREE.MeshPhongMaterial({
- side: THREE.DoubleSide,
- transparent: false,
- opacity: 1.0,
- shininess: 10,
+ side: THREE.FrontSide,
map: textures.madera.object
});
diff --git a/tp/src/train.js b/tp/src/train.js
@@ -157,7 +157,7 @@ function buildTrainWheel() {
const wheelsMaterial = new THREE.MeshPhongMaterial({
color: 0x393939,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -173,7 +173,7 @@ function buildTrainAxe(material) {
const axeMaterial = new THREE.MeshPhongMaterial({
color: 0x7A7F80,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -192,7 +192,7 @@ export function buildTrain() {
const chassisGeometry = buildTrainChassis();
const chassisMaterial = new THREE.MeshPhongMaterial({
color: 0x7A7F80,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -204,7 +204,7 @@ export function buildTrain() {
const chamberGeometry = buildChamber();
const chamberMaterial = new THREE.MeshPhongMaterial({
color: 0xFA1A09,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -226,7 +226,7 @@ export function buildTrain() {
const cabinRoofGeometry = buildCabinRoof();
const roofMaterial = new THREE.MeshPhongMaterial({
color: 0xFBEC50,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -260,7 +260,7 @@ export function buildTrain() {
const cylindersGeometry = BufferGeometryUtils.mergeGeometries([cylinderRight, cylinderLeft]);
const cylindersMaterial = new THREE.MeshPhongMaterial({
color: 0x393939,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0
});
@@ -314,7 +314,7 @@ export function buildTrain() {
const lightMaterial = new THREE.MeshPhongMaterial({
color: 0x393939,
- side: THREE.DoubleSide,
+ side: THREE.FrontSide,
shininess: 100.0,
emissive: 0xf6d32d
});
diff --git a/tp/src/trees.js b/tp/src/trees.js
@@ -80,7 +80,7 @@ export function createInstancedTrees(count) {
treeLogGeometry.translate(0, logHeight/2.0, 0);
const instancedTreeLogGeometry = new THREE.InstancedBufferGeometry();
instancedTreeLogGeometry.copy(treeLogGeometry);
- const treeLogMaterial = new THREE.MeshPhongMaterial({color: 0x7c3f00});
+ const treeLogMaterial = new THREE.MeshPhongMaterial({color: 0x7c3f00, side: THREE.FrontSide});
const instancedTreeLogs = new THREE.InstancedMesh(
instancedTreeLogGeometry,
treeLogMaterial,
