Three.js摄像头位置显示360视频的三个坐标
我使用了360视频播放器，当我改变相机位置并打印值时，它会显示所有三个坐标。它不应该只显示2个坐标，而第三个坐标应该保持不变。我正在render（）函数中打印Camera.position坐标Three.js摄像头位置显示360视频的三个坐标,three.js,Three.js,我使用了360视频播放器，当我改变相机位置并打印值时，它会显示所有三个坐标。它不应该只显示2个坐标，而第三个坐标应该保持不变。我正在render（）函数中打印Camera.position坐标 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script> <script src="https://
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/211120/orbitControls.js"></script>
<a href="#" id="testButton">TEST</a>
<a href="#" id="testButton2">TEST2</a>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var video = document.createElement('video');
video.autoplay = true;
video.src = 'https://streams.kolor.com/streams/833ec36d-b115-43a2-bbf1-aaca49046bab/source.02-720p_HD.mp4';
video.crossOrigin = '';
videoTexture = new THREE.Texture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
var scene = new THREE.Scene();
var cubeGeometry = new THREE.SphereGeometry(500, 60, 40);
var sphereMat = new THREE.MeshBasicMaterial({map: videoTexture});
sphereMat.side = THREE.BackSide;
var cube = new THREE.Mesh(cubeGeometry, sphereMat);
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 50;
camera.position.z = 100;
//camera.position.set(0,50,100);
scene.add(camera);
var controls = new THREE.OrbitControls( camera);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
controls.maxDistance = 50;
controls.minDistance = 50;
function render() {
if( video.readyState === video.HAVE_ENOUGH_DATA ){
videoTexture.needsUpdate = true;
}
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
console.log("X:"+camera.position.x +"Y:"+camera.position.y+"Z:"+camera.position.z);
}
render();
// test button function
// this does not work
var testButton = document.getElementById('testButton');
testButton.onclick = function ()
{
//camera.lookAt(new THREE.Vector3(50,60,70));
camera.position.y = 50;
camera.position.z = 100;
};
// another test button function
// this does work but then the camera bounces back to what it was looking at before
</script>
</body>
</html>
变量宽度=window.innerWidth；
var height=window.innerHeight；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
var video=document.createElement（'video'）；
video.autoplay=true；
video.src=https://streams.kolor.com/streams/833ec36d-b115-43a2-bbf1-aaca49046bab/source.02-720p_HD.mp4';
video.crossOrigin=''；
视频纹理=新的三个纹理（视频）；
videoTexture.minFilter=THREE.LinearFilter；
videoTexture.magFilter=THREE.LinearFilter；
videoTexture.format=THREE.RGBFormat；
var scene=new THREE.scene（）；
var立方计量法=新的三种。球面计量法（500,60,40）；
var sphereMat=新的3.MeshBasicMaterial（{map:videoTexture}）；
球体最侧面=三个背面；
var cube=新的三个网格（立方计量法、sphereMat）；
场景.添加（立方体）；
var摄像机=新的三视角摄像机（45，宽/高，0.11000）；
摄像机位置y=50；
摄像机位置z=100；
//摄像机位置设置（0,50100）；
场景。添加（摄影机）；
var控制装置=新的三个轨道控制装置（摄像机）；
controls.enableDamping=true；
控制。阻尼系数=0.25；
controls.enableZoom=false；
控件。最大距离=50；
控件。minDistance=50；
函数render（）{
if（video.readyState==video.HAVE\u足够的\u数据）{
videoTexture.needsUpdate=true；
}
控件更新（）；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
控制台日志（“X:+摄像机位置.X+”Y:+摄像机位置.Y+”Z:+摄像机位置.Z”）；
}
render（）；
//测试按钮功能
//这行不通
var testButton=document.getElementById（'testButton'）；
testButton.onclick=函数（）
{
//摄像机。注视（新的3。矢量3（50，60，70））；
摄像机位置y=50；
摄像机位置z=100；
};
//另一个测试按钮功能
//这确实起作用，但随后相机会反弹回它以前看到的状态