我有一个带有纹理的360球体,并使用DeviceOrientationControls环顾四周(仅限移动设备)。
我想得到当前的位置,所以我基本上可以创建一个热点 - 如果用户查看一个点超过3秒,则触发一个动作。
这是我的脚本。 有任何想法吗?
var camera, scene, renderer, controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
var vector = new THREE.Vector3( 1, 0, 0 );
camera.lookAt ( vector );
controls = new THREE.DeviceOrientationControls( camera );
scene = new THREE.Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( './assets/images/sphere-test-2.png' )
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
// var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
// var helper = new THREE.Mesh( helperGeometry, helperMaterial );
// scene.add( helper );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function animate() {
window.requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
console.log( renderer );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
camera.target
也会返回undefined