three.js + jquery, jquery немного сместила координаты

183
12 апреля 2018, 11:23

Имеется симуляция Солнечной системы. Сделала кнопку Earth, нажимая на которую юзер "перемещается" на Землю

$('#btn-earth').click(function(){
    camera.position.x = earth.position.x;
    camera.position.z = earth.position.z;
});

Однако, переместясь по событию, координаты слегка смещаются, примерно рядом с Землей. При этом если в анимации вот эти 2 строчки написать, все правильно, "стоишь" четко на Земле.

camera.position.x = earth.position.x;
camera.position.z = earth.position.z;

https://jsfiddle.net/Nata_Hamster/oxr2maac/1/

Answer 1

Можно завести отдельную булеву переменную, значение которой будет меняться во время клика по кнопке. Если значение переменной true - следовать за Землей, если нет - оставаться на месте или перемещаться в какую-то другую статичную точку в пространстве.

var camera, scene, renderer; 
var sun_geom, sun_mat, sun; 
var earth_geom, earth_mat, earth; 
var mars_geom, mars_mat, mars; 
var saturn_geom, saturn_mat, saturn; 
var t = 0; 
var offset_y = 0; 
var texture; 
var r = 0.019; 
var light; 
var followEarth = false; // переменная для следования за Землей 
 
init(); 
animate(); 
 
function init() { 
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 10000); 
  camera.position.z = 1; 
  camera.rotation.z = -Math.PI / 20; 
 
  scene = new THREE.Scene(); 
  light = new THREE.PointLight(0xffffff, 1.4, 7000); 
  light.position.set(100, 0, 0); 
  light.castShadow = true; 
  light.shadowMapWidth = 204; 
  light.shadowMapHeight = 204; 
  scene.add(light); 
 
 
  sun_geom = new THREE.SphereGeometry(0.12, 40, 40); 
  texture = new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/9/99/Map_of_the_full_sun.jpg'); 
 
  sun_mat = new THREE.MeshBasicMaterial({ 
    map: texture 
  }); 
  sun = new THREE.Mesh(sun_geom, sun_mat); 
  scene.add(sun); 
 
 
  earth_geom = new THREE.SphereGeometry(r, 10, 10); 
  texture2 = new THREE.TextureLoader().load('https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Whole_world_-_land_and_oceans_12000.jpg/500px-Whole_world_-_land_and_oceans_12000.jpg'); 
  earth_mat = new THREE.MeshBasicMaterial({ 
    map: texture2 
  }); 
  earth = new THREE.Mesh(earth_geom, earth_mat); 
  scene.add(earth); 
 
 
  saturn_geom = new THREE.SphereGeometry(2 * r, 30, 30); 
  texture7 = new THREE.TextureLoader().load('https://vignette.wikia.nocookie.net/space-engine/images/a/a8/Jupiter_Oberfl%C3%A4che.jpg/revision/latest/scale-to-width-down/640?cb=20151220023337&path-prefix=de') 
  saturn_mat = new THREE.MeshBasicMaterial({ 
    map: texture7 
  }); 
  saturn = new THREE.Mesh(saturn_geom, saturn_mat); 
  scene.add(saturn); 
 
 
  renderer = new THREE.WebGLRenderer({ 
    antialias: true 
  }); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  document.body.appendChild(renderer.domElement); 
 
} 
 
$('#btn-earth').click(function() { 
  followEarth = !followEarth; // смена состояния следования 
}); 
 
function animate() { 
  requestAnimationFrame(animate); 
  sun.rotation.y += 0.01; 
 
  earth.rotation.y += 0.01; 
 
  saturn.rotation.y += 0.01; 
 
  earth.position.x = Math.sin(t * 0.25) * 0.25; 
  earth.position.z = Math.cos(t * 0.25) * 0.25; 
 
  saturn.position.x = Math.sin(t * 0.05) * 0.45; 
  saturn.position.z = Math.cos(t * 0.05) * 0.45; 
 
  if (followEarth) { // следуем, если значение true 
    camera.position.x = earth.position.x; 
    camera.position.z = earth.position.z; 
  } 
 
  t += Math.PI / 180 * 2; 
  renderer.render(scene, camera); 
}
body { 
  overflow: hidden; 
  margin: 0; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button id="btn-earth" style="position: absolute;">Earth</button>

READ ALSO
Пропадает изображение при слайде

Пропадает изображение при слайде

На компьютере листает слайдер все нормально но на телефонной версии на 3 изображении оно пропадаетВ чем причина??? Ниже находится css для телефонов

248
Создать массив из значения input

Создать массив из значения input

Есть <input type=text>, в которое пользователь вписывает свое значение в формате от-до например 25-29 из введенного в input значения по нажатию кнопки...

210
Как кастомизировать jquery?

Как кастомизировать jquery?

Что если мне нужен не весь JQuery а только AJAX-запросы из него? Или какие-то другие функции на выборМожно ли эту библиотеку сначала кастомизировать...

181
Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать какие то действия в интернете,чтобы не проделывать кучу однообразной...

204