Does the positive Z axis move inward in threejs? The behavior of camera.near and camera.far seems strange

My goal is to display only a slice of my 3D object. I have tried setting the orthographic camera's camera.near to 2.0 and camera.far to 1.5, then iterating with values of camera.near = 1.5 and camera.far = 1.0. However, this approach is not yielding the desired results. Interestingly, when I set a smaller value (2) for camera.near and a larger value (10) for camera.far, it somewhat works. What I actually want is the opposite effect. I initially assumed that the Z axis is pointing outward from the screen.

Answer №1

The z axis in Three.js is positively oriented towards the outside.

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

On the contrary: the reason for any confusion may arise from the fact that when configuring view matrices, the near and far planes are actually defined as distances from the viewer. According to the OpenGL spec:

Parameters

nearVal, farVal
Specify the distances to the closer and further depth clipping planes. These values are negative if the plane is meant to be behind the viewer.

Just so you know, when dealing with a perspective matrix, both values are consistently positive.

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

The JQuery datepicker fails to display the current date

I am experiencing an issue with the datepicker on my webpage. While it is working correctly, the default date being displayed is '01/01/2001' instead of '11/23/2012', as I intended. Here is the jquery code I am using: $(":inpu ...

Populating a div with letter-spacing

I'm facing a challenge in populating a div with text using letter-spacing. The issue at hand is that I am unsure of the width of the div. Initially, my thoughts leaned towards using text-align= justify, however, I found myself lost in the maze withou ...

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

Toggle the visibility of text boxes based on the checkbox selection

After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

In my current project, I am implementing a feature in Angular 6 to close a Bootstrap modal once the server successfully receives the necessary data

Here, I am working on creating the content for a CRUD component that saves data as needed. My goal is to make the modal disappear once the data is submitted. <div class="container"> <div class="table-wrapper"> <div class="table-ti ...

Is there a way to access the value of a variable in Express that is stored in a different file?

Looking for a way to fetch the value of a variable that is located inside app.use? chatbot.js: const express = require('express'); const app = express.Router(); app.use(['/chat', '/chatbot'], (req, res, next) => { const ...

Can Google Charts be integrated with $refs in VueJS?

I'm currently working on implementing a timeline chart with Google Charts. The chart is displayed within its own component, which I later invoke from a higher-level parent component. However, I've run into an issue where the drawChart function re ...

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

The add-on for imageminJpegTran is designed to rotate images with ease

When I compress a buffer obtained from a file and rewrite it as a compressed version in memory, I am facing an issue where vertical images are being rotated while square and rectangle images are compressed correctly. Is there a way to pass options to the ...

Node.js POST request only executes successfully on the second attempt

I am facing a peculiar issue where upon submitting a form, it redirects to the form action URL and then displays a blank page. However, upon reloading the page, the data is displayed. index.jade - http://172.18.0.60:3000/ form#command(action='runc ...

JavaScript - Sending Form Data with Local Time

I want to automatically submit a form at a specific time of day The form should be submitted every day at "15:30:00" Here is the JavaScript code I have written: <script type="text/javascript> function initClock() { var now = new Date(); var h ...

Is it possible to create a basic calculator with Vue.js by incorporating v-model and possibly v-if?

I am looking to create a Vue.Js component that includes an input field displaying the potential hours saved by a user switching to our software. How can I implement the v-if directive in this scenario? For users spending 20 - 30 hours, they would save 10 ...

JavaScript loop through an array of objects

Is there a way to loop through and retrieve all of the addresses? const name = { john: [ { age: 21, address: 'LA', } ], sam: [ { age: 26, address: 'California' } ] } I have tried using th ...

Determine which JavaScript script to include based on whether the code is being executed within a Chrome extension

I am in the process of developing a Chrome extension as well as a web JavaScript application. I currently have an HTML container. I need the container.html file to include <script src="extension.js"> when it is running in the Chrome extension, and ...

The error encountered is: `Exception: startDate.getTime is not a valid function

const [currentDate, setCurrentDate] = useState(new Date()); const fetchDataFromAPI = () => { let timeStamp = Number(currentDate.getTime()); axios.get( `https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=BTC,USD,EUR& ...

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...

Received undefined response from Axios.get() request

While working with the code below, I encountered an issue. The axios get request from await axios.get('/products/api') is functioning properly and I can see the data in the console. However, for await axios.get('/users/api'), 'Unde ...

Turn off the authentication middleware for a particular HTTP method on a specific endpoint

Currently, I am using Express/Node and have developed authentication middleware to validate JWT on each request. My requirement is to disable this middleware for a specific route (POST '/api/user/') while keeping it active for another route (GET ...

Setting the height of columns in a Bootstrap panel to 100%

Is there a way to achieve 100% height for all three columns even without content? Check out this JSFiddle: <div class="row"> <div class="col-md-12"> <div class="shadow panel panel-default"> <div class="blue white-bord ...