I need to put a link within the control dat.gui to open an html file, How to do this ? I have already put levels of transparency and checkbox but do not know how do to open a link.
This has nothing to do with Three.js. Anyway, just pass a function variable/member like you would do other controls... It will create a button with your function in onclick. Example:
var obj = {};
obj.sampleNumber = 1;
obj.sampleLink = function() {
window.open("myfile.html");
}
var gui = new dat.GUI();
gui.add(obj, 'sampleNumber', -5, 5);
gui.add(obj, 'sampleLink');
Related
I am trying to zoom in/out when the user clicks the “+” or “-” buttons on my control panel. I got it to move left, right, up, down with the “tweenFunction” and it worked. I’ve tried
viewer.scene.camera.zoom += 0.1;
Which didn’t work for me because I don’t have the “camera” variable in my code, only the viewer. Here is my code
setup();
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
viewer.setEDLEnabled(false);
viewer.setFOV(60);
viewer.setPointBudget(5*1000*1000);
document.title = "";
viewer.setBackground("gradient"); // ["skybox", "gradient", "black", "white"];
viewer.loadSettingsFromURL();
viewer.loadGUI(() => {
viewer.setLanguage('en');
$("#menu_scene").next().show();
//viewer.toggleSidebar();
});
viewer.setDescription(`
`);
let sceneSG = new Potree.Scene();
let sceneSG2 = new Potree.Scene();
viewer.setScene(sceneSG);
Potree.loadPointCloud("model.js", "model", function (e){
sceneSG.addPointCloud(e.pointcloud);
sceneSG.view.position.set(37.812, -26.781, 51.178);
sceneSG.view.lookAt(new THREE.Vector3(-53.587, 33.834, 28.864));
let material = e.pointcloud.material;
material.size = 1;
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
});
you can't access "directly" to viewer.scene.camera because potree has two cameras (a perspective one and an orthographic). But you can access to the active camera with this function:
viewer.scene.getActiveCamera()
So if you want to zoom in, it could look like this:
var myactivecamera = viewer.scene.getActiveCamera();
myactivecamera.zoom += 0.1;
I have two objects in right and left side of window.
I want to zoom those objects individually when I hover it.
var itsLeftControls, itsRightControls;
itsRightControls = new THREE.TrackballControls(itsRightCamera);
itsLeftControls = new THREE.TrackballControls(itsLeftCamera);
document.getElementById('SubContainerLeft').onmouseover = function () {
aMouseOverActivate(itsLeftControls);
aMouseOverDeactivate(itsRightControls);
};
document.getElementById('SubContainerRight').onmouseover = function () {
aMouseOverActivate(itsRightControls);
aMouseOverDeactivate(itsLeftControls);
};
function aMouseOverActivate(theControl)
{
theControl.zoomSpeed = 0.8;
}
function aMouseOverDeactivate(theControl)
{
theControl.zoomSpeed = 0.0;
}
function animateLeft()
{
requestAnimationFrame(animateLeft);
renderLeft();
}
function renderLeft()
{
itsLeftControls.update();
itsLeftRenderer.render(itsLeftScene, itsLeftCamera);
}
function animateRight()
{
requestAnimationFrame(animateRight);
renderRight();
}
function renderRight()
{
itsRightControls.update();
itsRightRenderer.render(itsRightScene, itsRightCamera);
}
if I hover in left side and try to zoom with mouse scrolling wheel, it is working fine. after that when I hover in right side, I can see that same zooming effect in right side also without scrolling mouse.
How to fix this?
TrachballControls take a optional second argument that is the dom element onto which it will attach the mouse event listeners.
If this argument is not supplied, it will attach the event listeners to the document.
This means that both your trackball controls are listening for events on the document (rather than their respective containers which I think you want.)
So just send your scene container divs as the second arguments to TrackballControlls and you should be good to go.
var leftContainer = document.getElementById('SubContainerLeft');
var rightContainer = document.getElementById('SubContainerRight');
var itsRightControls = new THREE.TrackballControls(itsRightCamera, rightContainer);
var itsLeftControls = new THREE.TrackballControls(itsLeftCamera, leftContainer);
The Oracle Application Express code editor is just plain back text on white background. No Code highlighting. Also I can't press "tab" without the textfield loosing focus.
I am using firefox 31 (can't upgrade, rescricted by Admin at work here) Also I can't install plugins. I know you can change css on specific sites using a special folder in firefox ("chrome"-folder / userContent.css). I already used this to change die default size of the textfield, because it was frickin small everytime I opened the edit page.
So do you know any framework or script I can use in Apex ? (I could copy that shit to jsfiddle.net every time but that sucks
(I also found the scratchpad in Firefox, which can run js and jquery. Does that help ?)
[SOLVED]
since you can't use
<script src = "">
etc. in plain js, I had to use loadScript. For css files it was even more complicated, but I got it all working.
This is my code, I run it in scratchpad (firefox). It uses ACE to change a div to an editor with highlighting. When clicking apply I revert the editor-changes in the DOM but keep the text/code.
// Load Ace js
loadScript("http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js", function(){
//initialization code
});
// Load Ace css
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId)){
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css';
link.media = 'all';
head.appendChild(link);
}
// change textarea to div
var editorRegion = document.getElementById('F4000_P4651_PLUG_SOURCE_fieldset');
editorRegion.innerHTML = editorRegion.innerHTML.replace("textarea","div");
// run ACE
highlight();
// Modify the apply Button in Apex to first revert ACE-Editor to normal, then do the usual apply.
var applyChanges = document.getElementById('B3456326662');
applyChanges.setAttribute("onclick","modifiedApply()");
function modifiedApply(){
close();
setTimeout(normalApply, 500);
}
function normalApply(){
javascript:apex.submit('Apply_Changes');
}
// Revert ACE-Changes, but keep changed text/code.
function close(){
var value = editor.getValue();
editor.destroy();
var oldDiv = editor.container;
var newDiv = oldDiv.cloneNode(false);
newDiv.textContent = value;
oldDiv.parentNode.replaceChild(newDiv, oldDiv);
newDiv.outerHTML = newDiv.outerHTML.replace("div","textarea");
var old_new_old = document.getElementById('F4000_P4651_PLUG_SOURCE');
old_new_old.textContent = old_new_old.textContent.substring(0, old_new_old.textContent.length - 6);
}
var editor;
function highlight() {
editor = ace.edit("F4000_P4651_PLUG_SOURCE");
editor.setTheme("ace/theme/monokai");
editor.getSession().setUseWorker(false);
editor.getSession().setMode("ace/mode/javascript");
document.getElementsByClassName('ace_print-margin')[0].setAttribute("style","left:1000px");
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
So, I already have the circle in my screen and showed it up, but I wanted to change the graphic from the "default circle", which is created by using the code like so:
circle.graphic.BeginFill();
circle.graphic.DrawCircle(10,10,10);
circle.graphic.EndFill();
addChild(circle);
I wanted to change that to my desired image like so:
How do I do that?
Use BitmapData and beginBitmapFill with circle like so:
var myBitmap:BitmapData;
var imgLoader:Loader = new Loader();
imgLoader.load(new URLRequest("myImage.png"));
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawImage);
function drawImage(e:Event):void
{
myBitmap = new BitmapData(imgLoader.width, imgLoader.height, false);
myBitmap.draw(imgLoader);
var circle:Sprite = new Sprite();
circle.graphics.beginBitmapFill(myBitmap, null, true);
circle.graphics.drawCircle(50,50,100);
circle.graphics.endFill();
addChild(circle);
}
For more info see beginBitmapFill()
I have an image element with src pointing to an Handler (asp.net), and this image being used as source for Raster (PaperJs) object defined as global object and updated during window.load.
var raster;
paper.install(window);
function WindowOnLoad() {
raster = new paper.Raster('MainContent_imageData');
raster.position = paper.view.center;
window.paper.view.draw();
}
The above code is loading image onto the canvas on first load then the image element is getting updated through a button click which is associated with callback control (ComponentArt callback control) but the canvas is not, it displays blank.
Then I created an handler that is being called after the callback is complete but it also didn't work.
function CallBackCompleted(sender,eventArgs) {
var imgData = document.getElementById('MainContent_imageData');
raster.image = imgData ;
raster.position = window.paper.view.center;
window.paper.view.draw();
}
The following code fixed the issue. The raster object is added as a child object on layer[0] removed all the other objects except children[0], which refers to the raster object.
function CallBackCompleted(sender,eventArgs) {
if(window.paper.project.layers[0].hasChildren())
window.paper.project.layers[0].removeChildren(1);
var imageObj = new Image();
imageObj.src = document.getElementById('MainContent_imageData').src;
imageObj.onload = function () {
window.paper.project.layers[0].children[0].setImage(imageObj);
window.paper.project.layers[0].children[0].position = window.paper.view.center;
window.paper.view.draw();
}
}