I would like to create a lightbox/popup of a three.js model. My HTML canvas is appearing but I cannot see the three.js model inside the canvas and I don't understand why. Thanks
http://jsfiddle.net/cool_brian/e72duxwc/2/
My three.js function:
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 Light box:
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>
You are using "onClick" aswell as adding click events with jquery.
1 . I removed the onClick.
Your path to the external three.js was wrong and you also told jsfiddle to include it.
2 . I removed the included (framework section) three.js and add the correct github path to the latest three.js (external resources section).
3 . I changed a couple of the class and function calls for the latest three.js.
4 . I changed the way the canvas is being added to the page.
5 . I added cancelAnimationFrame when lightbox is closed.
It should now display how you expect.
BUT.
It will only close the first 'lightbox' as you are creating a new lightbox every time the text is clicked, but only hide it when it is closed. This results in more than 1 lightbox div being in the DOM (but only 1 visible).
To correct this I suggest you create the lightbox div when the page loads, hide it, then just add a new scene and show the lighbox when needed and remove the scene and hide the lightbox when appropriate.
Here is the JSFIDDLE: http://jsfiddle.net/e72duxwc/4/
Related
I searched and tried some answers about it but it doesn't work.
i tried like this:
var renderer = new THREE.WebGLRenderer( { alpha: true } );
and
root.renderer.setClearColor(0xffffff,0);
as i said it does not work i just saw black screen :/
here is my "init" function :
function init() {
var root = new THREERoot({
createCameraControls:false,
antialias: true,
fov:60
});
root.renderer.setClearColor(0xffffff);
root.renderer.setPixelRatio(window.devicePixelRatio || 1);
root.camera.position.set(0, 0, 400);
var textAnimation = createTextAnimation();
textAnimation.position.y = -40;
root.scene.add(textAnimation);
var tl = new TimelineMax({
repeat:-1,
repeatDelay:0.25,
yoyo:true
});
tl.fromTo(textAnimation, 4,
{animationProgress:0.0},
{animationProgress:1.0, ease:Power1.easeInOut},
0
);
createTweenScrubber(tl);
}
this is what i am using :
https://codepen.io/zadvorsky/pen/xVrMMO
In order for your Three.js project to be transparent, you need to set its renderer's alpha parameter to true:
this.renderer = new THREE.WebGLRenderer({alpha: true});
This way, the parts that don't render anything will show the background of your HTML page, so if your HTML background is #ff0000, then you should see red.
However, you're essentially disabling the transparency when you perform
root.renderer.setClearColor(0xffffff);
This line paints a white background on every frame, which means it's no longer transparent.
Also, I can't see your renderer.render(scene, camera); line, because your code example is so narrow in scope.
I have a page based on this example, and using the relevant lines from the webgl_material_bumpmap example for implementing a loading progress Dom Element.
The page is (temporarily) here. If what I have included below is not enough information, please see the source for this page.
My problem is that the Loading text block does not disappear when the model is loaded.
I show it using:
function installModel(file) {
if (model) {**strong text**
scene.remove(model);
}
render();
var loader = new THREE.JSONLoader(true);
loader.load("obj/" + file, modelLoadedCallback);
document.body.appendChild( loader.statusDomElement );
}
The init function (without the error handling stuff) is
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
camera.position.z = 30;
camera.lookAt( scene.position );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.damping = 0.3;
controls.addEventListener( 'change', render );
createWorld();
installModel("room1.json");
render();
loader.statusDomElement.style.display = "none";
}
Why does the Loading text remain visible?
You probably need to add:
loader.statusDomElement.style.display = "none";
in your callback function modelLoadedCallback() after you print to the console.
I worked it out.
I had to add another div element called "prog"
then
var show
function show() {
document.getElementById("prog").style.display = "inline";
}
and
var loader = new THREE.JSONLoader(true);
document.getElementById("prog").appendChild(loader.statusDomElement );
loader.load("obj/" + file, modelLoadedCallback);
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
overflow: hidden;
}
</style>
<script src="http://www.goodboydigital.com/pixijs/examples/1/pixi.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("https://dl.dropboxusercontent.com/s/en13743nxusaozy/player.PNG?dl=1&token_hash=AAFVxLm8fEjk3xxPad-kAZ98LJqLoZpdFy9fQtGrIfXL-A");
// create a new Sprite using the texture
var player = new PIXI.Sprite(texture);
// center the sprites anchor point
player.anchor.x = 0.5;
player.anchor.y = 0.5;
// move the sprite t the center of the screen
player.position.x = 200;
player.position.y = 150;
stage.addChild(player);
function animate() {
requestAnimFrame( animate );
//rotate player
player.rotation += 0.1;
// render the stage
renderer.render(stage);
}
</script>
</body>
</html>
This is my code (from the pixijs example, Loaiding the bunny), for some reason I can't seem to get the sprite to load... Can someone take a look at the code and help?
When I put in the right link (the stage rendering turns black). When I put in the wrong link to the sprite, then the stage renders fine but there is no sprite.
var texture = PIXI.Texture.fromImage("https://dl.dropboxusercontent.com/s....");
With the above code, a cross domain request is created for the Sprite texture to load. This is usually not allowed (as in Dropbox case).
In order to see the sprite you will have to copy the file to the local web server or allow Cross domain requests on the other server (https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS)
//local image instead of cross domain
var texture = PIXI.Texture.fromImage("img/player.PNG");
I'm going to start this question off by saying that this is 100% working in Firefox (v21.0). For some reason it's not working in Google Chrome (v27.0.1453.94m). It also doesn't work in IE10.
Here is the JavaScript code I'm having issues with:
function canvasDrawBackground(value){
console.log(value);
stage.removeChild(background);
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
background = new createjs.Container();
background.x = background.y = 0;
background.addChild(temp);
stage.addChild(background);
background.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.
In Chrome / IE10 nothing happens - or more simply nothing appears on the canvas. I think the issue is in regards to when I add the image into the container, as I can place other items into the container and it works.
I am using http://code.createjs.com/easeljs-0.6.1.min.js and this code is based off of the "drag" tutorial. Here's the code from the tutorial:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Dragging</title>
<link href="../../shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
To simulate my issue, change "var circle = new createjs.Shape();" into a bitmap / image, createjs.Bitmap("images/bg_" + value +".jpg");. It then doesn't render.
Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P
This is probably because the image is not loaded. If you only update the stage after creating it, the image may not display. I would recommend adding a callback to the image to update the stage after its loaded.
// Simple approach. May not work depending on the scope of the stage.
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
temp.image.onload = function() { stage.update(); }
It also may make sense to preload the images you intend to use.
Can I implement snap to grid operation with images in KineticJS
using jquery? (http://jqueryui.com/demos/draggable/snap-to.html)
Like I have few draggable images inside a canvas and I want them to restrict the movement inside a canvas...
Is it even possible that 2 images can snap together when one comes near the other in the canvas??
And can it be achieved using kinetic.js or javascript...
Thanks
Ashish
Here is the code..
it's a little complicated. I mean I'm loading images from outside the canvas..and there are two sets..now I want one set to be able to snap to other..
<script src="kinetic-v3.8.0.min.js">
</script>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<script>
function drawImage(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.clearRect(x,y,width,height);
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
darthVaderImg.draggable(true);
// add cursor styling
darthVaderImg.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg.on("dblclick dbltap", function(){
layer.remove(darthVaderImg);
layer.draw();
});
layer.add(darthVaderImg);
stage.add(layer);
//events
}
function drawImage2(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 300 ;
var y = stage.height / 2 - 137 ;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg2 = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
darthVaderImg2.draggable(true);
// add cursor styling
darthVaderImg2.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg2.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg2.on("dblclick dbltap", function(){
layer.remove(darthVaderImg2);
layer.draw();
});
layer.add(darthVaderImg2);
stage.add(layer);
$( ".darthVaderImg2" ).draggable({ grid: [ 20,20 ] });
}
function load(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = img.src;
};
function load2(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage2(this);
};
imageObj.src = img.src;
};
</script>
<title>HTMl5 drag drop multiple elements</title></head>
<body onmousedown="return false;">
<div id="container">
</div>
<div id="check1">
<ul id="img"> <li><a href="#"onclick="load(document.getElementById('i1'))">
<img class="ui-widget-header" src="dog.png" id="i1" alt="doggie" width="60"height="55"/>
</a></li>
<li>
<a href="#" onclick="load(document.getElementById('i2'))">
<img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
</li>
</ul>
</div>
<ul id="img1">
<li><a href="#" onclick="load2(document.getElementById('i4'))">
<img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
</a></li>
<li><a href="#" onclick="load2(document.getElementById('i5'))">
<img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
</ul>
</body>
</html>
You can do this different by using the dragBoundFunc.
return {
x: Math.round(pos.x / grid) * grid,
y: Math.round(pos.y / grid) * grid
}
I have created a complete snapping example: http://jsfiddle.net/PTzsB/1/
I submitted an answer to this question that doesn't use jQuery. Instead, there is a patch you can apply which gives you drag and drop with snap to grid in KineticJS on the HTML5 canvas.
Using jquery draggable UI with kineticJs to make elements snap to grid?
This is all very possible. It requires being a bit more familiar than the average jQuery user, though.
First, implementing the snap-to:
This is a simple idea. You use the jQuery UI Library. You add the necessary function for the 'snap-to' feature, by invoking 'snap-to' on all elements with the class of 'KineticJsImage'.
$( ".KineticJsImage" ).draggable({ snap: true });
Second, for all images propogated by KineticJs, we add the class 'KineticJsImage'
..I don't have anything to work with here...
You simply need to find where the image output is controlled and add a class
of KineticJsImage to the code.
As you mentioned in your first question, you'd found the snap-to operation. The 2nd box in the demo on that page uses the generic (code I mentioned above, as well) snap: true parameter. When you invoke this, you're telling the page to snap all draggable elements with the class of 'KineticJsImage' to ANY element that has ALSO been declared draggle.
$(".someElement").draggable({ snap: false }); // drags wherever, does not snap.
$(".KineticJsImage").draggable({snap: true }); // drags everywhere, snaps to anything.
$(".KineticJsImage").draggable({snap: '.KineticJsImage' }); // This will ensure that
any element with the class of 'KineticJsImage' is not only draggable, but will snap
to any other element with the class of' 'KineticJsImage' that is also draggable.
Everything you want to achieve is doing able with jQuery UI and the draggable / droppable extensions provided within.
Fool around and try to figure out out. When you can't, come back with the code and we'll show you where to go from there.
$("