Currently, I am attempting to determine the maximum distance that the camera can zoom in on a sphere while still keeping the entire sphere visible on the screen.
var dist = diameter / (2 * Math.tan( camera.fov * (Math.PI/180) / 2 ));
The issue is that zooming in too far causes the top and bottom parts of the sphere to be cut off. What could be causing this problem?
Just like how you can't see the "north pole" of a large sphere when standing close to it, the sphere is being clipped for the same reason.
You must calculate the distance for a plane that intersects the front of the sphere, not its center.
In essence, the value you calculated represents the minimum distance to the front of the sphere. To find the minimum distance to its center, simply add the sphere's radius to this quantity.
(Please note that this method provides a conservative approximation due to the sphere's curvature.)
UPDATE: Here is the precise solution.
var dist = radius / ( Math.sin( camera.fov * ( Math.PI / 180 ) / 2 ) );
fiddle: http://jsfiddle.net/x98Fk/3/
The vertical field-of-view of the three.js camera is used in this calculation. Therefore, the result pertains to the vertical direction. In cases where the window is wider than it is tall, additional adjustments may be necessary.
I wrote the following code to toggle a class for a div. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <div class="members-section " id="a ...
In the ever-evolving world of web development, what is the most effective method for creating a drag and drop builder in 2017? While this question has been posed in the past (as seen here), technology changes rapidly. Is HTML5 still the go-to option, or ha ...
Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...
I am currently working on exporting the contents of a MongoDB collection by using exports.getAllQuestions = async function (){ MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db("Time4Trivia"); ...
I need a way to ensure that a specific function is only called once when used in conjunction with ng-if and ng-repeat. <td ng-if="!vm.monthView && vm.yearView=='contract-year'" nginit="vm.ContractYearBaselines()" class="baseline-data ...
const axios = require('axios'); const options = { url: 'https://api.github.com/repos/axios/axios', headers: { 'User-Agent': 'axios' } }; function handleResponse(error, response, body) { if (!error && re ...
Here is a high-level overview of what happens: The following code functions correctly... <div id='showme'></div> <div id='theform'> <form ...> <input required ... <input required ... <inpu ...
Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs props: { idPending: { type: Number, required: true } }, methods: { fetchpage() { const orderId = this.idPending; this.$rou ...
I've been exploring the implementation of AES encryption in ECB mode and here is the code snippet I'm working with. function encrypt (key, iv, plaintext) { if(algorithm == 'aes-128-ecb') iv = new Buffer(''); var ciphe ...
Is there a way to develop a function within my Express JS MVC web application that can be accessed from any view? How can I define this function in middleware so it can be directly called from a view? I envision being able to use this function like: < ...
Exploring the potential of react-select as a city-picker selector for users to choose one or multiple cities to filter data. Take a look at how it appears on my page: https://i.sstatic.net/A3cBX.png The list of cities may be extensive, and I am concerned ...
After using the sapling addon in Blender, I created a tree similar to the example shown here. I then exported it to json using three.js for display in WebGL. However, only the foliage of the tree is visible and the trunk and branches are missing. Upon ...
I am a beginner in angular2 and I am attempting to utilize two components on a single page, but I keep encountering a 404 error. Here are my two .ts files: app.ts import {Component, View, bootstrap} from 'angular2/angular2'; import {events} f ...
I've successfully made a chat widget draggable using react-draggable. However, the chat widget is also consumed by an iframe created entirely with HTML. I need the iframe to be draggable as well, but react-draggable doesn't support this. Are ther ...
I encountered an issue while using selenium-webdriver in JavaScript to input a value into a field. Here is my test.js code: async () => { let driver = await new webdriver.Builder().forBrowser("chrome").build(); try { await driver.get("http://te ...
I would like to incorporate the use of a redis client in specific endpoints of my application. Here is how my app.js file is currently structured: //app.js const redis = require('redis'); const client = redis.createClient(process.env.REDIS_POR ...
Currently in search of a reliable Javascript widget toolkit that boasts a modern UI design like Dojo, incorporates AJAX for navigation, and effects. Essential requirement is flexibility and seamless fallback to an HTML-only version for console users. Whi ...
Encountering an error on Internet Explorer 11: https://i.sstatic.net/zGEeK.png https://i.sstatic.net/FKSUs.png Reviewing my webpack and babel configurations: webpack configuration const path = require('path'); const webpack = require('we ...
I am attempting to use jQuery to add the results of an ajax call to a paragraph. My goal is to extract the "myResult" variable from the inner getResult function and transfer it to the outer buildParagraph function. Unfortunately, the returned value is und ...
I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...