Серые края при уменьшении масштабаJavascript

Форум по Javascript
Ответить
Anonymous
 Серые края при уменьшении масштаба

Сообщение Anonymous »

У меня есть сцена со всеми запеченными текстурами, которые используются посредством эмиссии материалов. Итак, в сцене нет освещения. При увеличении все выглядит нормально. Но когда я уменьшаю масштаб, края сетки становятся серыми. Я пытался включить/отключить сглаживание, повозился с мип-маппингом, но ничего не улучшилось.
Есть идеи, почему это может быть?
Вот код JavaScript...
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import modelPath from './public/WineCheese_Spielszene_Baked_01.glb?url';

const scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

let controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI / 2; // Prevent rotation below horizon

// Handle window resize
window.addEventListener( 'resize', onWindowResize );

function onWindowResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
}

const loader = new GLTFLoader();
loader.load( modelPath, function ( gltf ) {
const model = gltf.scene;
scene.add( model );

// Hide loading animation
const loadingElement = document.getElementById( 'loading' );
loadingElement.classList.add( 'hidden' );

let usedGLBCamera = false;

// Use camera from GLB file if available and update its aspect ratio
if ( gltf.cameras.length > 0 ) {
camera = gltf.cameras[ 0 ];
// Store original properties from GLB file
const originalFOV = camera.fov;
const originalAspect = camera.aspect;
const focalLength = camera.getFocalLength();
// Only update aspect ratio, keep FOV as-is from GLB
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
scene.add( camera );
controls.dispose();
controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI / 2; // Prevent rotation below horizon
usedGLBCamera = true;
}
// Center the model
const box = new THREE.Box3().setFromObject( model );
const center = box.getCenter( new THREE.Vector3() );
const size = box.getSize( new THREE.Vector3() );
model.position.sub( center );
controls.target.set( 0, 0, 0 );
controls.update();
} );

function animate() {
controls.update();
renderer.render( scene, camera );
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ooming-out
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»