使用Three.js,我的360 Panoviewer上的纹理质量较低,我一直在使用此代码,据我所知我的设置是相同的。
但是,即使使用相同的图像,我的版本质量也低得多?
我的似乎有点扭曲,但是“三个”的所有几何看起来都一样。
这是我复制的原始版本-https://codepen.io/msummers40/pen/ALboOA
这是我的代码:
var camera, scene, renderer;
var dataContainer = document.getElementById('data-container');
var imageFile = dataContainer.getAttribute('data');
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
init();
animate();
function init() {
var eWidth = window.innerWidth; // * 0.8;
var eHeight = window.innerHeight; // * 0.8;
var container, mesh;
container = document.getElementById( 'gallery-modal' );
camera = new THREE.PerspectiveCamera( 75, eWidth / eHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
// invers the geometry on the x-axis so that all of the faces point inwards
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( imageFile )
} );
// find out what this done - recommended by thrax
material.map.minFilter = THREE.LinearFilter;
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( eWidth, eHeight );
// renderer.setSize( '800', '400' );
container.appendChild( renderer.domElement );
// Controls to move the image
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'wheel', onDocumentMouseWheel, false );
document.addEventListener( 'dragover', function ( event ) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false );
document.addEventListener( 'dragenter', function ( event ) {
document.body.style.opacity = 0.5;
}, false );
document.addEventListener( 'dragleave', function ( event ) {
document.body.style.opacity = 1;
}, false );
// Gallery parent container
var galleryDOM = document.getElementById('gallery');
// Modal
var modal = document.getElementById('gallery-modal');
// Click on individual gallery items
galleryDOM.addEventListener('click', function(e) {
// if click is on IMG
if(e.target.localName == 'div' && e.target.getAttribute('data-image')) {
// Show Modal
modal.style.display = "block";
// Define new image
var newestImage = e.target.getAttribute('data-image');
// Apply newestImage to material object in THREEjs
if(newestImage) {
material.map = new THREE.TextureLoader().load(newestImage);
}
}
});
// Closes out of modal by clicking outside
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
var eWidth = window.innerWidth; //* 0.8;
var eHeight = window.innerHeight; //* 0.8;
camera.aspect = eWidth / eHeight;
camera.updateProjectionMatrix();
renderer.setSize( eWidth, eHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting === true ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
}
function onDocumentMouseWheel( event ) {
camera.fov += event.deltaY * 0.05;
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
if ( isUserInteracting === false ) {
lon += 0.1;
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( camera.target );
/*
// distortion
camera.position.copy( camera.target ).negate();
*/
renderer.render( scene, camera );
}
答案 0 :(得分:0)
因此,事实证明根本不在此代码中。我也在使用WP和
我有一个功能可以调整1060以上的图像大小
,这在Three.js甚至未触及图像之前就使图像混乱。