Question

我试图在Threejs中制作一些响应全屏的内容。由于这个原因，我很难理解物体定位的概念。我还想添加动画，所以需要这些位置是动态的。

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var materialRed = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var materialBlue = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

var circle = new THREE.Mesh( new THREE.CircleGeometry( 12, 128 ), materialRed );
scene.add(circle);

var square = [];
square.push( new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 1), materialBlue ) );
square.push( new THREE.Mesh( new THREE.PlaneGeometry( 10, 10, 1), materialBlue ) );
scene.add(square[0]);
scene.add(square[1]);
square[0].position.x = 100;
square[1].position.x = -100;

camera.position.z = 100;

var render = function() {
    requestAnimationFrame(render);
    circle.position.x += 0.1;
    circle.position.y += 0.05;
    renderer.render( scene, camera );
};

render();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>

＆＃13;

var circle = new THREE.Mesh( new THREE.CircleGeometry( 12, 128 ), materialRed );
scene.add(circle);
circle.position.x = 100;

我需要了解定位会随着宽高比和相机截头的变化而变化。

修改

例如 -

我需要将球体移动到屏幕周围的椭圆轨道上。我需要计算轨道方程，它将在每个实例中得到球体的位置。我不希望球体移出框架，为此我准备改变轴的长度或球的大小。

Threejs的位置如何正常工作？

0 个答案: