我对three.js 完全陌生，只是想掌握three.js 库。我有一个球体渲染到屏幕，但我不知道它是什么 .position 成员正在引用，它似乎不是屏幕坐标。它的 x0 点似乎在屏幕的一半左右（我可以处理和理解），但它的 y0 大约是屏幕底部的 1/3，如果我移动它说 300，它不会移动 300 像素。
我有点超出了我的深度，只是破解了某人的示例代码以试图抓住它，但这让我感到虚张声势。我试过查看 3js API，但没有找到任何答案。
我会发布相关代码以防万一那里出现问题。
<script src="js/Three.js"></script>
<script src="js/Stats.js"></script>
<script src="js/mDetector.js"></script>
<script src="moddShape.js"></script>
<script language="javascript" type="text/javascript"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container,stats;
var camera, scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry, pointLight, pmesh, sphere, sphereMaterial;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var render_canvas = 1;
var render_gl = 1;
var has_gl = 0;
var targetX = 0, targetY = 0;
var CameraZPos = 240;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', handleMouseEvent, false );
init();
animate();
function init()
{
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 90, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = CameraZPos;
scene = new THREE.Scene();
// RENDERER
webglRenderer = new THREE.WebGLRenderer
(
{
antialias: true
}
);
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = 'relative';
container.appendChild( webglRenderer.domElement );
has_gl = 1;
// STATS - FPS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.left = '0px';
stats.domElement.style.zIndex = 0;
container.appendChild( stats.domElement );
{
createScene(0, 100, 5, 0 )
};
// LIGHT
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
}
function createScene(x, y, z, b )
{
// create the sphere's material
sphereMaterial = new THREE.MeshLambertMaterial(
{
// red.
color: 0xCC0000
});
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
sphere = new THREE.Mesh( new THREE.SphereGeometry(radius, segments, rings), sphereMaterial);
sphere.position.set( x, y, z );
sphere.scale.set( 1, 1, 1 );
sphere.overdraw = true;
// add the sphere to the scene
scene.add(sphere);
}
function onDocumentMouseMove(event)
{
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate()
{
requestAnimationFrame( animate );
render();
stats.update();//Update FPS
}
function handleMouseEvent(mouseEvent)
{
targetX = mouseX;
targetY = mouseY;
//Text field printouts
//Positions relevent to 0 0 midscreen
document.myform.XY_Coords.value = "X Pos " + targetX + "\n" + "Y Pos " + targetY;
//Positions relevent to 0 0 top left
document.myform.XY_Coords.value += "\n\nX Pos 2 " + mouseEvent.clientX + "\n" + "Y Pos 2 " + mouseEvent.clientY;
}
function render()
{
if (sphere.position.x < targetX)
{
sphere.position.x += .1;
}
if (sphere.position.y < targetY)
{
sphere.position.y += .1;
}
if (sphere.position.x > targetX)
{
sphere.position.x -= .1;
}
if (sphere.position.y > targetY)
{
sphere.position.y -= .1;
}
camera.lookAt( scene.position );
document.myform.shipCoords.value = "ShipX " + sphere.position.x + "\nShipY " + sphere.position.y + "\nShipZ " + sphere.position.z;
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
}
</script>
提前致谢