Есть ли способ плавать кнопку и текст над загрузчиком?

Я хочу расположить две кнопки в нижнем левом углу сайта вместе с заголовком в верхнем левом углу. Тем не менее, ive импортировала 3D-модель и, несмотря на то, что она находится в центре страницы, часть ее (im, угадывающая фон), похоже, покрывает кнопку, которую я имею в наличии. Мне было интересно, можно ли или плавать кнопки и текст над моделью или позиционировать модель внутри чего-то, чтобы установить ее размер, чтобы остановить ее перекрытие кнопки.Есть ли способ плавать кнопку и текст над загрузчиком?

Любая помощь очень ценится, поскольку я новичок.

Код, который я до сих пор можно увидеть ниже.

<!DOCTYPE html> 

<html> 

<head> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

$('#button').click(function() { 
    $('blood.DAE').toggle(); 
}); 



}); 
</script> 

<title>Visualising Cells</title> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="style.css"> 
<script src="three.js"></script> 
<script src="ColladaLoader.js"></script> 

</head> 

<body> 

<button type="button">Load Red Blood Cell</button> 


<script> 

var width = window.innerWidth; 
var height = window.innerHeight; 


var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 500); 
camera.position.z = 0.16; 
camera.position.x = 0; 
camera.position.y = 0; 
scene.add(camera); 


var renderer=new THREE.WebGLRenderer(); 
renderer.setSize(width,height); 
document.body.appendChild(renderer.domElement); 
renderer.render(scene,camera); 
renderer.setClearColor("rgb(255,255,255)"); 

light = new THREE.DirectionalLight(0xffffff); 
     light.position.set(1, 1, 1); 
     scene.add(light); 

light = new THREE.DirectionalLight(0xffffff); 
     light.position.set(0, 0, 0.14); 
     scene.add(light); 



var loader = new THREE.ColladaLoader(); 
     loader.load('blood.DAE', function (collada) { 

      object = collada.scene; 
      object.position.x = 0; 
      object.position.y = 0; 
      object.position.z = 0; 
      object.updateMatrix(); 
      scene.add(object); 
      } 
      ); 



document.addEventListener('keydown', function(event) { 
console.log("Up Arrow Pressed"); 
console.log(camera.position.z); 
if (event.keyCode == 38) { 

    if (camera.position.z >= 0.1) { 

     camera.position.z = camera.position.z - 0.01; 

    } 

} 

else if (event.keyCode == 40) { 

    console.log("Down Arrow Pressed") 

    if (camera.position.z < 0.2) { 

     camera.position.z = camera.position.z + 0.01; 
    } 

    } 
}, true); 

render = function() { 
     requestAnimationFrame(render); 

object.rotation.x += 0.01; 
object.rotation.y += 0.01; 

renderer.render(scene, camera); 
     }; 
     render(); 


</script> 


</body> 

</html>

источник

2016-02-11 G.Smith

ID = "BottomLeftButton" < - добавить, что к кнопке

и это ваш CSS

#BottomLeftButton{ 
    position:fixed; 
    bottom:0px 
    left:0px; 
}

добавить другие атрибуты, которые вы хотите (или если у вас уже есть селектор просто добавьте выше)

css «исправит» вашу кнопку в левом нижнем углу контейнера :)

источник

2016-02-11 18:20:37 WelshBoyZz

Положите кнопки, которые нужно поплавать внутри деления фиксированной позиции.

<style type="text/css"> 
    .float-btn{ 
     position: fixed; 
     bottom: 1%; 
     left: 2%; 
    } 
</style> 

<div class="float-btn"> 
    <button type="button">Load Red Blood Cell</button> 
    <button type="button">Another Button</button> 
</div>

посмотреть fiddle

источник

2016-02-11 18:24:18

Thankyou для быстрого повтора, он отлично работает! Мне также интересно, можно ли использовать jquery для назначения каждой из трехмерных моделей каждой из кнопок, у меня есть код, размещенный в вопросе, но я не уверен, как выбрать модель, сделать Мне нужно выбрать модель - это я (blood.DAE), рендер или загрузчик? –

@ G.Smith Этот вопрос кажется немного вне сферы применения тегов html и css, которые вы ставите на вопрос. Вы можете получить более качественные ответы, задав отдельный вопрос с тегом three.js, webgl или collada. –

Хорошо, благодарю вас за вашу помощь. –

Есть ли способ плавать кнопку и текст над загрузчиком?

ответ

Смежные вопросы