Three.js find edges of visible scene












0















I am building an animation that requires spawning of elements outside of visible area so they can be thrown into the scene (for example a fountain that starts below the bottom of screen and elements are shooting into the scene).



I made some research for very simple solution and i found this code:



// Get half of the cameras field of view angle in radians

var fov = camera.fov / 180 * Math.PI / 2;

// Get the adjacent to calculate the opposite

// This assumes you are looking at the scene

var adjacent = camera.position.distanceTo( scene.position );

// Use trig to get the leftmost point (tangent = o / a)

var right = Math.tan( fov ) * adjacent  * camera.aspect;


Now when i use it does seem to be working for both sides:




  • left: -right

  • right: right


But to find bottom edge (or top) with this its tricky as often it gives wrong position. For example i was making tests and when i've set window to be 850x920 the bottom edge is far into the scene.



Could someone help understand how to alter the code to help find all edges:



{

    left: ???,

    right: ???,

    top: ???,

    bottom: ???,

}


Maybe the bonus would be a better function where you could for example specify angle instead of just finding hard coded top, left etc...



something like:



let findPoint = (deg) => {

    // deg passed for example 270 (top), 90 (bottom) or custom (315)



    return // three.js coords (like 5.5, 3.4)

}


But the most important is basic function to work, Any help is welcomed.



On the snippet you can see the problem with top and bottom by using scroll and seeing how its spawned.




let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>








javascript math three.js trigonometry







share|improve this question

























  • Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

    – WestLangley
    Nov 23 '18 at 15:43
















0















I am building an animation that requires spawning of elements outside of visible area so they can be thrown into the scene (for example a fountain that starts below the bottom of screen and elements are shooting into the scene).



I made some research for very simple solution and i found this code:



// Get half of the cameras field of view angle in radians

var fov = camera.fov / 180 * Math.PI / 2;

// Get the adjacent to calculate the opposite

// This assumes you are looking at the scene

var adjacent = camera.position.distanceTo( scene.position );

// Use trig to get the leftmost point (tangent = o / a)

var right = Math.tan( fov ) * adjacent  * camera.aspect;


Now when i use it does seem to be working for both sides:




  • left: -right

  • right: right


But to find bottom edge (or top) with this its tricky as often it gives wrong position. For example i was making tests and when i've set window to be 850x920 the bottom edge is far into the scene.



Could someone help understand how to alter the code to help find all edges:



{

    left: ???,

    right: ???,

    top: ???,

    bottom: ???,

}


Maybe the bonus would be a better function where you could for example specify angle instead of just finding hard coded top, left etc...



something like:



let findPoint = (deg) => {

    // deg passed for example 270 (top), 90 (bottom) or custom (315)



    return // three.js coords (like 5.5, 3.4)

}


But the most important is basic function to work, Any help is welcomed.



On the snippet you can see the problem with top and bottom by using scroll and seeing how its spawned.




let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>








javascript math three.js trigonometry







share|improve this question

























  • Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

    – WestLangley
    Nov 23 '18 at 15:43














0












0








0








I am building an animation that requires spawning of elements outside of visible area so they can be thrown into the scene (for example a fountain that starts below the bottom of screen and elements are shooting into the scene).



I made some research for very simple solution and i found this code:



// Get half of the cameras field of view angle in radians

var fov = camera.fov / 180 * Math.PI / 2;

// Get the adjacent to calculate the opposite

// This assumes you are looking at the scene

var adjacent = camera.position.distanceTo( scene.position );

// Use trig to get the leftmost point (tangent = o / a)

var right = Math.tan( fov ) * adjacent  * camera.aspect;


Now when i use it does seem to be working for both sides:




  • left: -right

  • right: right


But to find bottom edge (or top) with this its tricky as often it gives wrong position. For example i was making tests and when i've set window to be 850x920 the bottom edge is far into the scene.



Could someone help understand how to alter the code to help find all edges:



{

    left: ???,

    right: ???,

    top: ???,

    bottom: ???,

}


Maybe the bonus would be a better function where you could for example specify angle instead of just finding hard coded top, left etc...



something like:



let findPoint = (deg) => {

    // deg passed for example 270 (top), 90 (bottom) or custom (315)



    return // three.js coords (like 5.5, 3.4)

}


But the most important is basic function to work, Any help is welcomed.



On the snippet you can see the problem with top and bottom by using scroll and seeing how its spawned.




let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>








javascript math three.js trigonometry







share|improve this question
















I am building an animation that requires spawning of elements outside of visible area so they can be thrown into the scene (for example a fountain that starts below the bottom of screen and elements are shooting into the scene).



I made some research for very simple solution and i found this code:



// Get half of the cameras field of view angle in radians

var fov = camera.fov / 180 * Math.PI / 2;

// Get the adjacent to calculate the opposite

// This assumes you are looking at the scene

var adjacent = camera.position.distanceTo( scene.position );

// Use trig to get the leftmost point (tangent = o / a)

var right = Math.tan( fov ) * adjacent  * camera.aspect;


Now when i use it does seem to be working for both sides:




  • left: -right

  • right: right


But to find bottom edge (or top) with this its tricky as often it gives wrong position. For example i was making tests and when i've set window to be 850x920 the bottom edge is far into the scene.



Could someone help understand how to alter the code to help find all edges:



{

    left: ???,

    right: ???,

    top: ???,

    bottom: ???,

}


Maybe the bonus would be a better function where you could for example specify angle instead of just finding hard coded top, left etc...



something like:



let findPoint = (deg) => {

    // deg passed for example 270 (top), 90 (bottom) or custom (315)



    return // three.js coords (like 5.5, 3.4)

}


But the most important is basic function to work, Any help is welcomed.



On the snippet you can see the problem with top and bottom by using scroll and seeing how its spawned.




let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>








let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>





let SCENE_WIDTH = window.innerWidth;

let SCENE_HEIGHT = window.innerHeight;



let FIELD_OF_VIEW = 45;

let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;

let NEAR = 0.1;

let FAR = 10000;



let scene = new THREE.Scene();



let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(0x8d8d8d, 1);

renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);

document.getElementById('webgl-container').appendChild(renderer.domElement);



let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);

camera.position.set(0, 0, 50);

camera.lookAt(new THREE.Vector3(0, 0, 0));  

scene.add(camera);



let light = new THREE.PointLight(0xffffff, 0.8);

light.position.set(30, 100, 50);

scene.add(light);



/* find edge */

let fov = camera.fov / 180 * Math.PI / 2;

let adjacent = camera.position.distanceTo( scene.position );

let right = Math.tan( fov ) * adjacent  * camera.aspect;



/* right */

let geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material = new THREE.MeshPhongMaterial({color: 0x007bff});

let object = new THREE.Mesh( geometry, material );

object.position.x = right;

scene.add(object);



/* left */

let geometry2 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material2 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object2 = new THREE.Mesh( geometry2, material2 );

object2.position.x = -right;

scene.add(object2);



/* top */

let geometry3 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material3 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object3 = new THREE.Mesh( geometry3, material3 );

object3.position.y = right;

scene.add(object3);



/* bottom */

let geometry4 = new THREE.TorusGeometry( 10, 3, 16, 100 );

let material4 = new THREE.MeshPhongMaterial({color: 0x007bff});

let object4 = new THREE.Mesh( geometry4, material4 );

object4.position.y = -right;

scene.add(object4);



let controls = new THREE.OrbitControls(camera, renderer.domElement);



function update () {



	renderer.render(scene, camera);

	requestAnimationFrame(update);

}

requestAnimationFrame(update);

#webgl-container {

	position: absolute;

	left: 0;

	top: 0;

	background-color: aqua;

}

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>



<div id="webgl-container"></div>





javascript math three.js trigonometry




javascript math three.js trigonometry






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 '18 at 8:05







Mevia

















asked Nov 23 '18 at 7:57









MeviaMevia

367422




367422













  • Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

    – WestLangley
    Nov 23 '18 at 15:43



















  • Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

    – WestLangley
    Nov 23 '18 at 15:43

















Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

– WestLangley
Nov 23 '18 at 15:43





Try stackoverflow.com/questions/13350875/three-js-width-of-view/…

– WestLangley
Nov 23 '18 at 15:43












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442672%2fthree-js-find-edges-of-visible-scene%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442672%2fthree-js-find-edges-of-visible-scene%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

To store a contact into the json file from server.js file using a class in NodeJS

Image
0 I have created three files -contactPresentation.js, contactService.js, contacts.json. I will run the contactService.js file. And it will navigate to contactPresentation.js file that will only choose an option to either add or display a file. If add(), then add the data into add of service file.And the data will be added to the contacts.json file . And if display(), then display the display() of service file. And the display will take the data from contacts.json file. However, i know my code is flawed. Please correct it . I am also getting an error - this.contacts.push(new ContactService(userName, contactNumber, emailId)); ^ TypeError: Cannot read property 'push' of undefined at ContactService.add (e:NodeJSProjectcontactManager2contactService.js:57:23) at new C
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
Read more