时间戳

首页 > 解决方案 > 在全景图后面分层网格

javascript - 在全景图后面分层网格

问题描述

我想知道我们是否可以在前景中有一个等距矩形全景图，在背景中有一个网格，这样当用户在全景图上移动时，鼠标将能够从后面拾取平面信息。

我尝试使用以下代码加载全景图，但找不到任何方法在背景中分层网格。

var sphereBufferGeometry = new THREE.SphereGeometry(500,60,40);
sphereBufferGeometry.scale( -1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
    map: new THREE.TextureLoader().load( [panorama image])});
var mesh = new THREE.Mesh( sphereBufferGeometry, material );
scene.add( mesh );

我也尝试使用下面的代码加载网格（.obj），但变量“object”的类型为 THREE.Group，变量“child”返回多个 THREE.MESH 类型的对象。所以，我不确定我们如何在前景中分层全景。

objLoader.load( [objfile], function ( object ) {
  object.traverse( function ( child ) {
  });
});

任何帮助，将不胜感激。

谢谢

标签： javascriptthree.js

解决方案

我能够找到解决方案。这个想法是在同一个场景中同时拥有 spheregeometry 和网格，并对网格进行任何初始位置/旋转/比例更改，以使其与全景图对齐。完成此操作后，对相机的任何更改都会以完全相同的方式影响两个对象，从而使用户产生这两个对象始终对齐的印象。

推荐阅读