Question

我有一个带有纹理的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

threeJS - DeviceOrientationControls - 摄像机位置

0 个答案: