[英]three.js lightbox not showing
我想創建一個three.js模型的燈箱/彈出窗口。 我的HTML畫布正在顯示,但是在畫布內部看不到three.js模型,我也不明白為什么。 謝謝
http://jsfiddle.net/cool_brian/e72duxwc/2/
我的three.js函數:
function cube() {
var myCanvas = document.getElementById("myCanvas");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);
renderer.setClearColorHex(0xffffff, 1);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.02;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
};
jQuery燈箱:
jQuery(document).ready(function ($) {
//alert("the doc is ready");
$('.lightbox_trigger').click(function (e) {
//prevent default action (hyperlink)
e.preventDefault();
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<canvas id="myCanvas" width="800px" height="800px"style="border:10px solid #000000;">' +
'</canvas>' +
'</div>' +
'</div>';
//insert lightbox HTML into page
$('body').append(lightbox);
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function () {
$('#lightbox').hide();
});
HTML:
<p>lightbox demo
<ul>
<li> <a class="lightbox_trigger" onClick="alert(link 1)"> alert </a>
</li>
<li> <a class="lightbox_trigger" onClick="cube();"> three.js example </a>
</li>
</ul>
</p>
您正在使用“ onClick”以及使用jquery添加點擊事件。
1。 我刪除了onClick
。
您通往外部three.js的路徑是錯誤的,並且您還告訴jsfiddle包括了它。
2。 我刪除了包含的(框架部分)Three.js,並將正確的github路徑添加到最新的Three.js(外部資源部分)。
3。 我更改了最新的three.js的幾個類和函數調用。
4。 我更改了將畫布添加到頁面的方式。
5。 當燈箱關閉時,我添加了cancelAnimationFrame
。
現在它應該顯示您的期望。
但。
每次單擊文本時,它將僅在創建新的燈箱時關閉第一個“燈箱”,而僅在關閉時隱藏它。 這導致DOM中存在超過1個lightbox div(但只有1個可見)。
為了解決這個問題,我建議您在頁面加載時創建燈箱div,將其隱藏,然后添加一個新場景並在需要時顯示光箱,並在適當的時候刪除該場景並隱藏燈箱。
這是JSFIDDLE: http : //jsfiddle.net/e72duxwc/4/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.