three.js - three.js: Image in panorama viewer is rippled
问题描述
Currently I'm making myself familiar with three.js and created a simple panorama viewer: http://webentwicklung.ulrichbangert.de/threejs-image-on-sphere-inside.html Unfortunately the vertical edges of the pillars are rippled. When using the panorama viewer of Panorama Studio everything is fine: http://ulrichbangert.de/heimat/Halberstadt/2018-06-10_Halberstadt_Dom_Panorama.html
var width = window.innerWidth,
height = window.innerHeight;
var scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0x333333));
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 3, 5);
scene.add(light);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 1;
camera.fov = Math.max(100, Math.min(200, camera.fov));
camera.updateProjectionMatrix();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
loader.load('images/panorama.jpg', function (texture) {
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial({
map: texture
});
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(20, 32, 32),
material
);
sphere.scale.x = -1;
sphere.rotation.x = -0.5;
scene.add(sphere);
var animate = function () {
requestAnimationFrame(animate);
sphere.rotation.y += 0.002;
renderer.render(scene, camera);
};
animate();
});
What's going wrong here?
解决方案
推荐阅读
- windows - 使用 NVIDIA 显卡运行“.exe”文件的命令
- java - 正则表达式捕获第一个冒号 : 和最后一个方括号之间的单词,其中包含冒号 :
- marklogic - 如何从数据库中获取文档并使用 dmsdk 将其传递给转换?
- javascript - 如何将我的角度项目插入过滤器?
- javascript - 缩放时图表不更新:min 属性已更改
- java - 使用 -gc true 在 Java 12 与 Java 8 上的流 API 的神秘微基准测试结果
- r - 如何将数据随机分成三个相等的大小?
- string - 在 Powerquery 中:是否可以使用列名及其通配符形式的内容来查找其他列中的字符串?
- email - Plesk 无法使用外部 mx 发送邮件
- git - SSH 无法与主机名连接,与 IP 一起工作正常