Javascript three.js lightbox未显示
我想创建一个lightbox/popup的three.js模型。我的HTML画布出现了,但我看不到画布中的three.js模型,我不明白为什么。谢谢 My three.js函数:Javascript three.js lightbox未显示,javascript,jquery,html,three.js,Javascript,Jquery,Html,Three.js,我想创建一个lightbox/popup的three.js模型。我的HTML画布出现了,但我看不到画布中的three.js模型,我不明白为什么。谢谢 My three.js函数: function cube() { var myCanvas = document.getElementById("myCanvas"); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(40, window.innerW
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:
您正在使用onClick以及jquery添加单击事件。 1.我去掉了那只猫 您到external three.js的路径是错误的,您还告诉JSFIDLE包含它。 2.我删除了包含的framework部分three.js,并将正确的github路径添加到最新的three.js外部资源部分 三,。我为最新的three.js更改了几个类和函数调用 四,。我改变了画布添加到页面的方式 五,。我在lightbox关闭时添加了cancelAnimationFrame 它现在应该显示您的期望。 但是 每次单击文本时,当您创建新的灯箱时,它将仅关闭第一个“灯箱”,但仅在关闭时隐藏它。这会导致DOM中有多个lightbox div,但只有一个可见。 要纠正这一点,我建议您在页面加载时创建lightbox div,将其隐藏,然后在需要时添加新场景并显示lighbox,并在适当时删除场景并隐藏lightbox。 以下是JSFIDLE:
<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>