I started developing from an example that shows to integrate three.js + greensock.
Link: http://www.kadrmasconcepts.com/blog/2012/05/29/greensock-three-js/
I am trying to put canvas used by three.js + greensock to a div inside my page designed. But canvas always gets appended to bottom of screen. I tried to do getelementbyid and access my div object but did not work.
Current:
https://www.dropbox.com/s/kowowsjvdnwkl0f/bart.png?dl=0
As current implementation shows canvas is below blue panel but want it to be inside red panel (div).
Can someone help me fix it. I am attaching my code below...Thank you very much in advance!
php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horse Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jason Kadrmas" />
<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="bower_components/raphael/raphael-min.js"></script>
<script src="bower_components/morrisjs/morris.min.js"></script>
<script src="js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='css/simple.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/lib/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/lib/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/lib/TimelineLite.min.js"></script>
<script type="text/javascript" src="js/lib/TweenLite.min.js"></script>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>-->
<script type="text/javascript" src="js/lib/Three.js"></script>
<script type="text/javascript" src="js/ThreeScene.js"></script>
</head>
<body>
<div class="wrapper">
<!-- <div class="navbar-inner">
<div class="container">
<span class="btn-navheader">Timeline Demo - Horse</span>
Reset
Pause
Start
</div>
</div>-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand">Balloon Task v1.0</a>
</div>
<!-- /.navbar-header -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6 text-left">
<div class="">Balloon Number</div>
</div>
<div class="col-xs-6 text-right">
<div class="huge">1/30</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-9 col-md-18">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div id="taskcanvas" class="canvas">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row bottom-container">
<div class="col-md-12">
<span>Timeline Demo - Horse</span>
Reset
Pause
Start
</div>
</div>
</div>
</div>
<!-- /#wrapper -->
<script language="javascript" type="text/javascript">
var width = 500,
height = 500,
camera,
scene,
renderer,
SHADOW_MAP_WIDTH = 2048,
SHADOW_MAP_HEIGHT = 2048,
dominoGeometry,
dominoMaterial,
dominoPos = -180,
tweens = [],
type = 0,
d = 8,
basicScene,
tl = new TimelineLite({onComplete: complete});
init();
function init() {
basicScene = new THREE.BasicScene({width: width, height: height});
TweenLite.ticker.addEventListener("tick", render);
initObjects();
}
// Horse morph variables.
var horse;
var paused = true;
var theta = 0;
var duration = 2100;
var keyframes = 15, interpolation = duration / keyframes;
var lastKeyframe = 0, currentKeyframe = 0;
function render() {
basicScene.renderer.render(basicScene.scene, basicScene.camera);
if (horse && !paused) {
// Alternate morph targets
var time = Date.now() % duration;
var keyframe = Math.floor(time / interpolation);
if (keyframe != currentKeyframe) {
horse.morphTargetInfluences[ lastKeyframe ] = 0;
horse.morphTargetInfluences[ currentKeyframe ] = 1;
horse.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
horse.morphTargetInfluences[ keyframe ] = (time % interpolation) / interpolation;
horse.morphTargetInfluences[ lastKeyframe ] = 1 - horse.morphTargetInfluences[ keyframe ];
}
}
function initObjects() {
dominoGeometry = new THREE.CubeGeometry(100, 100, 100, 1, 1, 1);
dominoMaterial = new THREE.MeshPhongMaterial();
dominoMaterial.color = new THREE.Color().setRGB(1, 1, 1);
dominoMaterial.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
dominoMaterial.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);
var light = new THREE.DirectionalLight();
light.intensity = 0.7;
light.castShadow = true;
light.position.set(-320, 350, 100);
basicScene.add(light);
// Floor
var geometry = new THREE.PlaneGeometry(1800, 800, 3, 3);
var material = new THREE.MeshPhongMaterial({color: 0xffffff, wireframe: false});
material.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
material.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);
var mesh = new THREE.Mesh(geometry, material);
mesh.receiveShadow = true;
mesh.position.set(0, -50, 0);
basicScene.add(mesh);
initDominoes();
initHorse();
}
function initDominoes() {
var mesh, i;
for (i = 0; i < 4; i++) {
mesh = new THREE.Mesh(dominoGeometry, dominoMaterial);
mesh.position.set(dominoPos, 0, 0);
mesh.rotationAutoUpdate = false;
mesh.castShadow = true;
mesh.receiveShadow = false;
mesh.scale.set(0.1, 1, 0.4);
basicScene.add(mesh);
dominoPos += 50;
tweens.push(TweenLite.to(mesh.rotation, 2, {y: Math.PI * 2, ease: Bounce.easeOut, delay: d * 0.1 + i * 0.2}));
}
}
function initHorse() {
var loader = new THREE.JSONLoader(true);
loader.load("models/horse.js", function (geometry) {
horse = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0x0aa8a5, morphTargets: true}));
horse.scale.set(0.75, 0.75, 0.75);
horse.position.set(-600, -50, 0);
horse.rotation.y = Math.PI / 2;
basicScene.add(horse);
// Click handlers
$('.start').on('click', start).show();
$('.pause').on('click', pause).show();
$('.reset').on('click', complete).show();
// Horse
tweens.push(TweenLite.to(horse.position, d, {x: 900}));
tweens.push(TweenLite.to(horse.position, d * 0.1, {y: 150, delay: d * 0.07, ease: Sine.easeOut}));
tweens.push(TweenLite.to(horse.position, d * 0.12, {y: -50, delay: d * 0.18, ease: Sine.easeIn}));
tl.insertMultiple(tweens);
tl.pause();
});
}
function pause() {
paused = true;
tl.pause();
}
function start() {
paused = false;
tl.play();
}
function complete() {
pause();
tl.progress(0);
}
</script>
</body>
</html>
JS:
THREE.BasicScene = function( args ) {
var container = document.getElementById( "taskcanvas" );
var _this = this;
this.width = args.width;
this.height = args.height;
// Setup scene, camera, and renderer
this.scene = new THREE.Scene();
this.camera = initCamera( this.scene );
this.renderer = initRenderer();
container.appendChild( this.renderer.domElement );
container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );
function initCamera( scene ) {
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 380;
camera.aspect = _this.width / _this.height;
camera.updateProjectionMatrix();
scene.add( camera );
return camera;
}
function initRenderer() {
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( _this.width, _this.height );
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = _this.camera.far;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.3;
renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
return renderer;
}
};
THREE.BasicScene.prototype = {
add: function( obj ) {
this.scene.add( obj );
}
};
CSS:
canvas {
background-image: -webkit-linear-gradient(top, #cee4ff, #fff3e1);
background-image: linear-gradient(to bottom, #cee4ff, #fff3e1);
background-image: -moz-linear-gradient(top, #cee4ff, #fff3e1); //FF3.6+
background-image: -ms-linear-gradient(top, #cee4ff, #fff3e1); //IE10
background-image: -o-linear-gradient(top, #cee4ff, #fff3e1); //Opera 11.10+
}
You might have moved container out by accident
container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );
Will cause the container to be on body, which will show up at the bottom.
#Vinay had the right answer, you can give the renderer constructor a canvas so you can make your own canvas in the container, then pass that canvas directly to the renderer.
Related
According to the documentation, calling computeBoundingBox() on a BufferGeometry should update the .boundingBox attribute. In my example below, a spinning cube is created and geometryCube.boundingBox should be displayed in the console. Why doesn't it work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TubeGeometry tests</title>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.148.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x002000, 4, 6);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometryCube = new THREE.BoxGeometry(2, 2, 2);
geometryCube.computeBoundingBox();
console.log('geometryCube.BoundingBox', geometryCube.BoundingBox); //output geometryCube.BoundingBox undefined
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 });
const meshCube = new THREE.Mesh(geometryCube, material);
scene.add(meshCube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
meshCube.rotation.x += 0.01;
meshCube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Is it as simple as it should be boundingBox, not BoundingBox
I wrote an AJAX Javascript code for my ESP32 datalogger which worked so far using old versions of Chart.js. The website hosted by the ESP32 is not working anylonger if I use a more recent of Chart.js.
The error message I caught is:
Uncaught ReferenceError: Chart is not defined at datalogin.html
The line in the code involved is this one
const myChart = new Chart(ctx, config);
Something in the interpretation seems to occur at a very early stage. But I could not identify what. See code below.
I already tried different Chart.js repository in order to have it working. It had absolutly no influence. I actively looked using different browser regarding this specific problematic and I could not find any way of solving this problem.
Thanks a lot for your support
<!DOCTYPE html>
<html lang="en">
<head>
<title>EFM Meter loggin interface</title>
<link rel="icon" type="image/x-icon" href="lightning.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="https://github.com/cdnjs/cdnjs/blob/master/ajax/libs/Chart.js/4.0.1/chart.js" ></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns#2.0.1/dist/chartjs-adapter-date-fns.bundle.js"></script>
<style>
.jumbotron {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Elektrofeldmeter Data Logging Page</h1>
</div>
<div class="container">
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12 ">
<div class="container-sm">
<canvas id="myChart" style="" height="152"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="border border-2 m-2">
<div class="col-sm-12">
<h3> Parameters setup</h3>
</div>
</div>
<div class="border border-2 m-2">
<div class="row">
<div class="col-sm-12">
<label for="customRange1" class="form-label" id="labelPWM">PWM of motor: 190</label>
<input type="range" class="form-range" min="0" max="190" step="1" value="190" onchange="rangeValue(this)" id="customRange1">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmin">Y min: -5000</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="-5000" onchange="rangeY()" id="Ymin">
</div>
<div class="col-sm-6">
<label for="customRange2" class="form-label" id="labelYmax">Y max: +5000 0</label>
<input type="range" class="form-range" min="-5000" max="5000" step="1" value="5000" onchange="rangeY()" id="Ymax">
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="saveAs()">*.CSV</button>
</div>
</div>
</div>
</div>
</div>
<script>
function rangeValue(element) {
console.log(element.value);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pwm?value="+element.value, true);
xhr.send();
document.getElementById("labelPWM").innerHTML = "PWM of motor: " + element.value;
};
function rangeY() {
myChart.options.scales.y.max = document.getElementById('Ymax').value;
myChart.options.scales.y.min = document.getElementById('Ymin').value;
myChart.update();
};
function clkOrientation(element) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/clk?value="+element.checked, true);
xhr.send();
}
const animation = { };
const config = {
type: 'line',
data: {
datasets: [{
borderColor: '#fc9905',
borderWidth: 2,
radius: 0,
data: 0
}
]
},
options: {
animation,
interaction: {
intersect: false
},
plugins: {
legend: false
},
scales: {
x: {
type: 'time',
title: {
display: true,
text: 'time',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
},
y: {
type: 'linear',
title: {
display: true,
text: 'Electrical field [V/m] # PWM=190',
color: '#000000',
font: {
size: 20
}
},
ticks :
{
color: '#000000',
font: {
size: 12
}
}
}
},
plugins: {
title: {
display: true,
text: 'Electrical field value [V/m]'
}
}
}
};
Chart.defaults.font.size = 20;
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);
function addData(chart, data) {
for (var i = 0 ; i < data.length; i++){
chart.data.datasets[0].data.push({"x":data[i].x,"y":(data[i].y-32.671)/0.48025});
};
chart.update();
};
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var txt = this.responseText;
var array = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
addData(myChart,array);
}
};
xhttp.open("GET", "readEFM", true); //Handle readADC server on ESP32
xhttp.send();
};
setInterval(function() {
getData();
}, 5000);
txt = '[{"x":1662921606250,"y":35.71},{"x":1662921606450,"y":35.61},{"x":1662921606650,"y":35.70},{"x":1662921606850,"y":35.74},{"x":1662921607050,"y":35.78},{"x":1662921607250,"y":35.45},{"x":1662921607450,"y":35.65},{"x":1662921607650,"y":35.66},{"x":1662921607850,"y":35.78},{"x":1662921608050,"y":35.76}]';
const myArr = JSON.parse(txt);
addData(myChart,myArr);
myChart.update();
function saveAs(){
let csvContent = "data:text/csv;charset=utf-8,";
for (var i = 0 ; i < myChart.data.datasets[0].data.length; i++){
csvContent+=myChart.data.datasets[0].data[i].x + "," + myChart.data.datasets[0].data[i].y + "\n";
}
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "EFM_log.csv");
document.body.appendChild(link);
link.click();
};
</script>
</body>
</html>
i am a beginer in frontend and javascript hard for me :( I want to make count numbers with component scrollspy uikit 3 without jquery https://getuikit.com/docs/scrollspy
I made like this, but it's not working
<span id="number"></span>
<script>
UIkit.scrollspy('#number', 'inview', function () {
const countUp = new CountUp('number', 0, 1000 );
countUp.start();
});
</script>
I created a script for this.
var util = UIkit.util;
var el = util.$('#heading');
var textIndex = 0;
UIkit.scrollspy(el, {repeat: true, delay: 100});
util.on(el,'inview', function (){
function counter( start, end, duration) {
let current = start,
range = end - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
el.textContent = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
counter(0, 100, 3000);
});
util.on(el, 'outview', function(){
el.textContent = 0;
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.6.22/dist/js/uikit-icons.min.js"></script>
<section class="uk-section uk-section-primary" uk-height-viewport="offset-top: true">
<div class="uk-container">
<div class="uk-text-center">
<h1 >SECTION 1</h1>
Source Code for Number Increment
</div>
<div class="uk-text-center uk-margin-medium-top">
<a class="uk-link-reset" href="#section" uk-scroll>Scroll</a>
</div>
</div>
</section>
<section class="uk-section uk-section-secondary" id="section">
<div class="uk-container">
<h1 class="uk-text-center" id="heading">0</h1>
</div>
</section>
You need to listen inview and outview event. Here is the method:
UIkit.util.on(element, 'event', function(){
//your code will be here here
});
I am trying to get a user input from a form and create a cube out of it. Right now it doesn't update the image at all. This is also my first post on here so it's probably going to look like crap.
I'm looking to do this at runtime and have it change based off a single part of the from being changed one at a time.
<script type="text/javascript">
var Warehouse = {
length: 4,
width: 4,
height: 4,
columnBaySpacingL: 0,
columnBaySpacingW: 0,
exteriorConstruction: "",
numberOfDockDoors: 0,
squareFootage: 0,
numberOfParkingSpc: 0
};//end of warehouse object
//create object
Warehouse.length = myForm.elements["LOW"].value;
Warehouse.width = myForm.elements["WOW"].value;
Warehouse.height = myForm.elements["HOW"].value;
Warehouse.columnBaySpacingL = myForm.elements["CBSL"].value;
Warehouse.columnBaySpacingW = myForm.elements["CBSW"].value;
Warehouse.exteriorConstruction = myForm.elements["EXT"].value;
Warehouse.numberOfDockDoors = myForm.elements["NDD"].value;
Warehouse.squareFootage = myForm.elements["SOA"].value;
Warehouse.numberOfParkingSpc = myForm.elements["NPS"].value;
//Warehouse.length = getElementsByName("LOW").value;
//Warehouse.width = getElementById("WOW").value;
//Warehouse.height = getElementById("HOW").value;
//Global vars for Three.js
var container, stats;
var CANVAS_WIDTH = 200;
var CANVAS_HEIGHT = 200;
var camera, scene, renderer;
var cube, plane;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init(Warehouse);
animate();
//Three.js functions
function init(Warehouse) {
//container = document.createElement('div');
container = document.getElementById('canvas');
document.body.appendChild(container);
// var info = document.createElement('div');
// var info = document.getElementById('canvas');
// info.style.position = 'absolute';
// info.style.top = '10px';
// info.style.width = '100%';
// info.style.textAlign = 'center';
// info.innerHTML = 'Drag to spin the warehouse';
// container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Warehouse
var geometry = new THREE.BoxGeometry(Warehouse.length, Warehouse.width, Warehouse.height);
for (var i = 0; i < geometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i + 1].color.setHex(hex);
}//end for loop
var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 });
cube = new THREE.Mesh(geometry, material);
cube.position.y = 150;
scene.add(cube);
//Plane
var geometry = new THREE.PlaneBufferGeometry(200, 200);
geometry.rotateX(- Math.PI / 2);
var material = new THREE.MeshBasicMaterial({ color: 0x0e0e0, overdraw: 0.5 });
plane = new THREE.Mesh(geometry, material);
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container.appendChild(renderer.domElement);
// stats = new Stats();
// container.appendChild(stats.dom);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}//end init
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}//end on WindowResize
function onDocumentMouseDown(event) {
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}// end onDocumentMouseDown
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
}//end onDocumentMouseMove
function onDocumentMouseUp(event) {
document.removeEventListener('mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}//end onDocumentMouseUp
function onDocumentMouseOut(event) {
document.removeEventListener(' mousemove', onDocumentMouseMove, false);
document.removeEventListener('mouseup', onDocumentMouseUp, false);
document.removeEventListener('mouseout', onDocumentMouseOut, false);
}//end onDocumentMouseOut
function onDocumentTouchStart(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}//end if
}//end onDocumentTouchStart
function onDocumentTouchMove(event) {
if (event.touches.length === 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
}//end if
}//end onDocumentTouchStart
function animate() {
requestAnimationFrame(animate);
// stats.begin();
render();
// stats.end();
}//end animate
function render() {
plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}//end render
//Save Button
<div class="panel-body" name="All++GROUP++" style="float: left; width: 50%;">
<form name="myForm">
<div class="platform-form-group ng-scope group" name="WareHouseInfromation++GROUP++">
<button class="promptCollapsebutton" type="button" onclick="ToggleGroupVisibility(this)">-</button><b>Warehouse Information</b>
<!--Grouping for entire prompt-->
<div class="platform-form-row form-group" name="LOW++PROMPT++">
<div class="promptLabel">
LOW
</div>
<div class="promptDescription" name="LOW++DESCRIPTION++">
Length of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="LOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="WOW++PROMPT++">
<div class="promptLabel">
WOW
</div>
<div class="promptDescription" name="WOW++DESCRIPTION++">
Width of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="WOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="HOW++PROMPT++">
<div class="promptLabel">
HOW
</div>
<div class="promptDescription" name="HOW++DESCRIPTION++">
Height of Warehouse ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="HOW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="CBSL++PROMPT++">
<div class="promptLabel">
CBSL
</div>
<div class="promptDescription" name="CBSL++DESCRIPTION++">
Column Bay Spacing - Length ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="CBSL" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="CBSW++PROMPT++">
<div class="promptLabel">
CBSW
</div>
<div class="promptDescription" name="CBSW++DESCRIPTION++">
Column Bay Spacing - Width ( Lnft ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="CBSW" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="EXT++PROMPT++">
<div class="promptLabel">
EXT
</div>
<div class="promptDescription" name="EXT++DESCRIPTION++">
Exterior Construction:
</div>
<div class="promptValue">
<select class="auto-style3" name="EXT" oninput="theInputChanged()">
<option value="0">No exterior</option>
<option value="1">Metal siding</option>
<option value="2">Tiltup</option>
<option value="3">Concrete block</option>
<option value="4">Insulated Panels</option>
</select>
</div>
</div>
<div class="platform-form-row form-group" name="NDD++PROMPT++">
<div class="promptLabel">
NDD
</div>
<div class="promptDescription" name="NDD++DESCRIPTION++">
Number of Dock Doors ( Each ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="NDD" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="SOA++PROMPT++">
<div class="promptLabel">
SOA
</div>
<div class="promptDescription" name="SOA++DESCRIPTION++">
Square Footage of Office Area:
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="SOA" step="1" type="number">
</div>
</div>
<div class="platform-form-row form-group" name="NPS++PROMPT++">
<div class="promptLabel">
NPS
</div>
<div class="promptDescription" name="CBSW++DESCRIPTION++">
Number of Parking Spaces ( Each ):
</div>
<div class="promptValue">
<input class="auto-style3" max="16" min="1" name="NPS" step="1" type="number">
</div>
</div>
</div>
</form>
</div>
Simple fix, just created a new function that separates the canvas initialization and the shape formation. This then updates with a model for the shape.
I have Lat & Long. How can i get West/East | North/South from GPS?
Screenshot attached: ScreenShot
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/design/js/jquery-autocomplete/jquery.autocomplete_geomod.js"></script>
<script type="text/javascript" src="/design/js/jquery-autocomplete/geo_autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/design/js/jquery-autocomplete/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// use all the autocomplete options as documented at http://docs.jquery.com/Plugins/Autocomplete
/* additional geo_autocomplete options:
mapkey : 'ABQ...' (required for Static Maps thumbnails, obtain a key for your site from http://code.google.com/apis/maps/signup.html)
mapwidth : 100
mapheight : 100
maptype : 'terrain' (see http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes)
mapsensor : true or false
*/
$('#location').geo_autocomplete(new google.maps.Geocoder, {
mapkey: 'ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTIx7cuHpcaq3fYV4NM0BaZl8OxDxS9pQpgJkMv0RxjVl6cDGhDNERjaQ',
selectFirst: false,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330
}).result(function(_event, _data) {
var coords = new google.maps.LatLng(
_data.geometry.location.lat(),
_data.geometry.location.lng()
);
$('#lat').val (_data.geometry.location.lat())
$('#lng').val (_data.geometry.location.lng())
console.log (coords.lat () + '/' + coords.lng ());
if (_data) map.fitBounds(_data.geometry.viewport);
});
});
</script>
<style>
.ac_results li img {
float: left;
margin-right: 5px;
}
</style>
<h3>jQuery geo-autocomplete Plugin Demo</h3>
<div>Location: <input type="text" id="location" /> (autocomplete)</div>
<br/>
<div id="coords">Lat:
<input id="lat" name="lat" />
Lng:
<input id="lng" name="lng" />
</div>
<br/>
East/West: if longitude < 0 then West, else East
North/South: if latitude < 0 then South else North
Explanation:
The 0-Meridian (through London/Greenwich) is the limit between west and east.
The Aequator is the limit between south and north.
in Google, coordinates are represented in decimal degrees, where the negative sign, defines E/W or N/S