Растягиваются объекты вдали от центра

201
27 декабря 2021, 04:20

Имеется такой код:

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>MDN Games: Three.js demo</title> 
	<style> 
		body { margin: 0; padding: 0; } 
		canvas { width: 100%; height: 100%; } 
	</style> 
</head> 
<body> 
<script src="three.js"></script> 
<script> 
	var bgColor = 0xf0f1f2; 
	var screenWidth = window.innerWidth; 
	var screenHeight = window.innerHeight; 
	//renderer 
	var renderer = new THREE.WebGLRenderer({antialias:true}); 
	renderer.setSize(screenWidth, screenHeight); 
	renderer.setClearColor(bgColor);//renderer.setClearColor(bgColor, 1); 
	document.body.appendChild(renderer.domElement); 
	//scene 
	var scene = new THREE.Scene(); 
	//camera 
	var camera = new THREE.PerspectiveCamera(90, screenWidth/screenHeight, 0.1, 1000 ); //new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); 
	camera.position.set(0, 0, 50); 
	camera.up.set(0, 0, 0); 
	camera.lookAt(0, 0, 0); 
	scene.add(camera); 
	 
	//Object 
	var group = new THREE.Object3D(); 
	 
	 
	var raycaster = new THREE.Raycaster(); 
	 
	function clickOnDot(event) 
	{ 
		// https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z/49847108#49847108 
		// Mouse / Canvas X, Y to Three.js World X, Y, Z 
		// 
		// get x,y coords into canvas where click occurred 
		var rect = renderer.domElement.getBoundingClientRect(); 
		var	x = event.clientX - rect.left; 
		var	y = event.clientY - rect.top; 
		// convert x,y to clip space; coords from top left, clockwise: 
		// (-1,1), (1,1), (-1,-1), (1, -1) 
		var worldCoordMouse = new THREE.Vector3(); 
		worldCoordMouse.x = ( (x / renderer.domElement.clientWidth ) * 2) - 1; 
		worldCoordMouse.y = (-(y / renderer.domElement.clientHeight) * 2) + 1; 
		worldCoordMouse.z = 0.5; // set to z position of mesh objects 
		// reverse projection from 3D to screen 
		worldCoordMouse.unproject(camera); 
		// convert from point to a direction 
		worldCoordMouse.sub(camera.position).normalize(); 
		// scale the projected ray 
		var distance = -camera.position.z / worldCoordMouse.z; 
		var scaled = worldCoordMouse.multiplyScalar(distance); 
		var worldCoords = camera.position.clone().add(scaled); 
	 
	 
		//console.log("Click screen coord: " + event.clientX + ", " + event.clientY);   
		//console.log("Click world coord: " + worldCoords.x + ", " + worldCoords.y); 		 
	 
		//  
		// Intersection 
		// 
		var screenCoordMouse = new THREE.Vector2(); 
		screenCoordMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
		screenCoordMouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;  
		raycaster.setFromCamera( screenCoordMouse, camera );    
	 
		var intersects = raycaster.intersectObjects( scene.children  , true); 
	 
		//intersects.forEach(function(element){ 
		//	console.log("Intersection: " + element.object.id); 
		//}); 
 
		CreateDot(worldCoords.x, worldCoords.y, worldCoords.z); 
	} 
	 
	function CreateDot(posX, posY) 
	{ 
		var geometory = new THREE.SphereGeometry(1.5,6,6); 
		var material = new THREE.MeshBasicMaterial({ color: 0x1a1a1a }); 
		var mesh = new THREE.Mesh(geometory, material); 
		mesh.position.x = posX; 
		mesh.position.y = posY; 
		mesh.position.z = 0; 
		group.add(mesh); 
		scene.add(group); 
	} 
	 
	 
	 
	function render()  
	{ 
		requestAnimationFrame(render); 
		renderer.domElement.addEventListener( 'click', clickOnDot, false ); 
		renderer.render(scene, camera); 
	} 
render(); 
</script> 
</body> 
</html>
Данная программа по нажатию клавиши лкм добавляет точки. Проблема в том, что точка выглядит круглой только в центре экрана, а по бокам она похожа на эллипс. Это из за того, что точкой является сфера. Как сделать, что бы точки были везде и всегда круглые и одного размера?

READ ALSO
Как убрать у числа пробел JS
javascript

Как убрать у числа пробел JS

Есть функция parseInt(max30, 10); преобразует строки вида 1100 в числоНо бывает встречается стока записанная вот так 1 100, пробел мешает, выдает NaN

 167
запуск скриптов php и js по кнопке
javascript

запуск скриптов php и js по кнопке

Имеется кнопка, при нажатии на которую происходит php скрипт, на добавление данных в базу данныхТак же по этой кнопке вызывается js скрипт, со всплывающим...

 101
Как компилятор понимает, где одна переменная, а где другая?
Java

Как компилятор понимает, где одна переменная, а где другая?

Почему если при создании объектов указать перед значением (short), то компилятор понимает, в какую переменную записать это значение?

 256
Swagger - ошибка пути
Java

Swagger - ошибка пути

В Swagger есть проблема на вызов реста возвращающий List<Map<String, Object>> (вверху появляется сообщение)

 138