Tips for controlling frustum in three.js

Recently, I came across a fascinating parallax view implementation that creates an illusion of depth, and now I'm eager to recreate something similar using Three.js.

One hurdle I've encountered is the need for a non-symmetric camera frustum. Essentially, the camera's frustum needs to be fixed to the rendered object.

So, my question is, how can I achieve this in three.js? Is it possible to manipulate the frustum corners or frustum sides?

Check out the top-down view of my camera below.

Initially facing the object straight on:

After moving the camera to the left:

javascriptgraphicsthree.jsfrustumcamera-projection

Answer №1

To adjust the perspective, you have the option of utilizing the setViewOffset function to alter the frustum or directly modifying the camera's projection matrix.

Answer №2

I found the solution to my issue with the help of pailhead's suggestion about using the projection matrix. By adjusting the 8th and 9th indices of the matrix array, I was able to perform an affine transformation in both the x and y directions.

https://i.sstatic.net/Qrjb0.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to divide an array into separate columns in JavaScript?

Hey there fellow JavaScript enthusiasts! I am working with an array that I created from data extracted from a csv file. Here's a snippet of how it looks: https://i.sstatic.net/tczVz.png Each index in the array, for example array[0], represents the ...

javascriptarraysalgorithmarraylist

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Issue with Protractor in Eclipse: Unable to locate Protractor option on Run Configuration popup. Despite following the steps outlined in http://www.protractortest.org/#/ and this guide on configuring Protractor with Eclipse (specifically the 2 Answer step ...

javascripteclipseselenium-webdriverwebdriverprotractor

Calculating the dot product of two arrays using JavaScript

let array1 = [2,4,6] let array2 = [3,3,3] let result = dotProduct(array1,array2) // should return 36 Can you suggest a streamlined approach to creating the dotProduct function without relying on external libraries? ...

javascript

The Ajax form is failing to send data to PHP

Thanks to Stackoverflow, I've been diving into website design. I recently put together some code for handling data sent from an HTML form using Ajax. The code does a good job of error checking, but it seems to be missing the step of actually sending t ...

javascriptphpjqueryajax

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

javascriptjqueryhtmlcss

When using a master page in ASP.Net webforms, the autocomplete feature may not function correctly

I'm encountering an issue with a script on my website. I have a web form called CoursesPage.aspx that utilizes a master page. I have implemented autocomplete functionality using jQuery on a textbox to display course names fetched from a database. The ...

c#javascriptjqueryasp.netmaster-pages

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Seeking a solution to use a custom table as the dropdown portion for a DropDownList in my project. My goal is for users to see the custom table when they click on the DropDownList, rather than the default dropdown menu. I expected to be able to achieve th ...

javascriptjqueryasp.netdrop-down-menuinternet-explorer-7

What is the best way to reduce the file size of a group of PNG images for

For my game character, I have a collection of PNG files including stand.png, run1.png, run2.png. To display a series of actions on the JavaScript canvas, I need to load these images. However, the size of each .png file adds up quickly – for example, it ...

javascriptcanvaspnggif

Implementing multiple configurations in Angular 2 for a single project

I am currently working on an Angular 2 project that relies on configuration files to access various microservices. This project is deployed and built automatically by Jenkins on different servers. The process can be visualized using this link https://i.sst ...

javascriptangularjenkins

Querying through a database containing 1 million <string Name, int score> pairs efficiently within sub-linear time

My JSON object holds 1 million pairs. var student = {[ { name: "govi", score: "65" }, { name: "dharti", score: "80" }, { name: "Akash", score: "75" },............. up to a million ...

javascriptc#jquery.netjson

Tips for mocking constructors in AngularJS, specifically the Date() constructor

Trying to verify a function which receives millisSinceEpoch and gives back the time if it is today's date, otherwise it gives the date. getLocaleAbbreviatedDatetimeString: function(millisSinceEpoch) { var date = new Date(millisSinceEpoch); if (d ...

javascriptangularjs

Loading a gallery dynamically using AJAX in a CakePHP application

I am currently working with Cakephp 2.8.0 and I am facing an issue with implementing ajax in my application. I have a list of categories displayed as li links, and upon clicking on a category, I need to remove certain html code, locate the necessary catego ...

javascriptphpjqueryajaxcakephp

Using LIKE in MSSQL with an input parameter: A guide for Node developers

I found myself in a predicament where I was unsure how to phrase my question and where a solution seemed elusive. My current tool of choice is the mssql NPM package, but unfortunately, the documentation is not providing the necessary guidance. The goal I ...

javascriptsqlsql-servernode.jsnpm

The copyFileSync function is failing to copy the file without generating any error messages

I have developed a JavaScript function running in a nodejs/Electron client to copy a file from the user's flash drive to c:/Windows/System32. The file is copied to enable manual execution from Command Prompt without changing directories. The issue I ...

javascriptnode.jselectron

Ways to separate my json object into multiple variables

I am looking to extract the following data: name, meetup, tag from my object and store them in separate variables or objects. Here is my json object: var data = { "MY_ID": 1, "module": [ { "name": "Manch ...

javascriptjson

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

javascriptphpjqueryhtmlajax

Using React router to handle multiple hierarchical parameters

Having a documentation component in my app, I want the URLs to appear as follows: url: myapp.com/docs url: myapp.com/docs/document-1 url: myapp.com/docs/category-1/document-2 url; myapp.com/docs/category-1/category-2/document-2 The challenge lies in set ...

javascriptreactjsreact-router

Looping through the json resulted in receiving a null value

When working with typescript/javascript, I encountered an issue while trying to fetch the 'statute' from a data object: {_id: "31ad2", x: 21.29, y: -157.81, law: "290-11",....} I attempted to assign data.law to a variable, but received a typeer ...

javascripttypescript

JavaScript functionality is not operational when accessed from a network drive

I'm having an issue running the following file. It works perfectly when run from a local drive but fails to execute when placed on a network drive. Any insights on why this may be happening? The code snippet below is what I am attempting to run, util ...

javascriptjqueryajaxnode.jsjquery-ui

Using Node.js with the Instagram API resulted in the error message: "Failed to decode a text frame in UTF-8 format."

For my project, I am utilizing the Instagram API with the http node.js module. The API call is quite simple: getJSON : function(options, on_result, on_error) { var req = http.request(options, function(res) { var output = ''; ...

javascriptnode.jsinstagram