[英]three.js — fit a background image panorama
我想把這個圖像 - https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg - 作為我的全景背景three.js場景。
我有以下代碼:
var sphere = new THREE.SphereGeometry(200, 200, 32);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(<path to above image>);
var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);
然而
當我通過紙板查看並旋轉360度時,我看不到背景旋轉360度(但小於那個)。 如何對齊?
當我在筆記本電腦上查看時,我可以旋轉圖像,但它似乎不適合屏幕尺寸
是否有關於如何將給定背景圖像完美地擬合為three.js全景圖的指南?
據我所知,沒有指南,但您可以使用three.js示例進行測試:
這里也有立方圖 ,但它不是創建全景圖的常用或簡單方法,這種情況下它適用於CSS,而不是webGL。
正如您在webGL equirectangular全景代碼中看到的,正確的代碼將是:
var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.