Is there anyone out there with a suggestion on how to position the camera so it is directly facing upwards towards a specific point on the sphere?
LATEST DEVELOPMENT
It turns out that Radio's solution was spot on. Upon further investigation, I discovered that my coordinates were actually reversed.
Check out the fiddle I made: http://jsfiddle.net/kbtn6pz5/
In this code snippet, I am moving the camera to a random point on a sphere, adjusting its lookAt property, and setting its altitude above the surface of the sphere.
This example is based on the fiddle boilerplate...
var camera, scene, renderer, geometry, material, mesh;
initialize();
animateScene();
function initialize() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
scene.add(camera);
var radius = 200;
geometry = new THREE.SphereGeometry(radius, 32, 32);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var point = THREE.GeometryUtils.randomPointsInGeometry(geometry, 1);
var altitude = 100;
var coefficient = 1 + altitude / radius;
camera.position.x = point[0].x * coefficient;
camera.position.y = point[0].y * coefficient;
camera.position.z = point[0].z * coefficient;
camera.lookAt(mesh.position);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animateScene() {
requestAnimationFrame(animateScene);
renderScene();
}
function renderScene() {
renderer.render(scene, camera);
}
I am looking to create a seamless navigation experience between controls on a webpage. Below is an example code snippet that outlines the functionality where a user can click on any component and be directed to another controller. Sample code: const app ...
Currently, I am utilizing Ajax to send an array to the router, as demonstrated below... var send = function () { var data = search console.log(data) $.ajax({ type: 'post', url: ...
I am currently developing an online survey creator. The structure of a Question entity is as follows: [Question] int QuestionId { get; set; } int QuestionNumber { get; set; } String QuestionText { get; set; } QuestionType QuestionType { get; } When prese ...
I struggle with understanding scopes and similar concepts in various programming languages. Currently, I am working on an express application where I take user input, query an arbitrary API, and display the results in the console. To interact with the REST ...
My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...
Currently utilizing the colorbox modal plugin (http://colorpowered.com/colorbox/) I'm facing an issue with a simple form placed in a master page - the submit button is unresponsive and doesn't trigger any action. It seems like several users are ...
When working in JavaScript, I typically define an array like this: var arr = [1,2,3]; It's also possible to do something like: arr[-1] = 4; However, if I were to then set arr to undefined using: arr = undefined; I lose reference to the value at ...
How can I use jQuery to count the number of jpg image files in my document? Here is the command to count the image files: $('#div').html($('img').length ); However, this counts all image files with the 'img' tag. Is there ...
I came across an interesting tutorial about testing React applications. The tutorial showcases a simple component designed to demonstrate testing asynchronous actions: import React from 'react' const TestAsync = () => { const [counter, setC ...
I am looking to extract only specific properties from a given object. Can TypeScript interfaces be used to iterate through the data and eliminate unnecessary properties? Sample data: [ 0: { "original_language" : "en", "t ...
I am working on distributing an array of three blue colors evenly on the faces of an IcosahedronGeometry. I want to ensure that adjacent faces use different colors from the array. Would it be better to use an array with 4 colors instead? The challenge for ...
Struggling with using HTMLunit to login and upload a file. Successfully logged in but unable to locate the form, despite it being present on the HTML page. Here is the JAVA CODE snippet: public static void main(String[] args) { WebClient webClient = ...
I am currently working on a country list component that includes phone codes, country names, and flags. The use of the map() function is causing some delay in loading time. I am looking for a way to determine if the map() function has finished executing or ...
Hello everyone, I currently have an array of objects containing some populated fields. Below is the product schema: import mongoose, { Schema } from 'mongoose'; const productSchema = new mongoose.Schema( { name: String, description: S ...
I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...
It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...
I'm currently working on a function that utilizes typings to extract values from a nested object. With the help of this post, I managed to set up the typing for two levels successfully. However, when I introduce a third (known) level between the exis ...
In my nodejs app, the folder structure is as follows: project |-- src/ | |-- controllers/ | | |`-- authorize-controller.ts | |`-- index.ts |--dist/ | |--controllers/ | | |`-- authorize-controller.js | | |`-- authorize-controller.js.map | ...
With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...
JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...