Currently, I am using Three Js to create a visual representation of a car. However, I am encountering an issue with the perspective camera that I can't seem to resolve.
My goal is to make it appear more realistic by only showing the front of the car, not the back. Do you understand what I mean? It's a bit humorous!
Despite trying numerous properties, I haven't been successful in achieving this result.
For those interested, here is the code in my github repository.
It appears that in your code, you are adjusting the Field of View (FOV) using the mouse wheel...
Is this the intended functionality?
Typically, one would adjust the camera's z position to zoom in and out, rather than changing the FOV.
I recommend following the suggestion in the comments by jscastro and setting your camera's FOV to 45 while moving the camera closer. Additionally, have your scroll event update the camera's position, rather than the FOV.
You can explore a demo where you modify the camera's FOV and z position to observe how they interact.
var camera, scene, renderer, mesh, material, stats;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 400;
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial();
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
// Add dat.gui.
var gui = new dat.GUI();
// Code for interacting with camera's FOV and position goes here...
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}body {
padding: 0;
margin: 0;
}
canvas {
display: block;
}<script src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<link href="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>My goal is to ensure that buttons wrap properly inside their cell. I have set a max-width for the cell as well as a ghost table of 200px. The width should not extend past 200px, causing the span to wrap to the second row automatically. This method works ev ...
I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...
Currently, I am utilizing basic form validation to ensure that the email entered is in the correct format. Once validated, the data is sent via Ajax for further processing. During this process, I also check if the email address is already in use and whethe ...
I attempted to share data between two controllers by using a factory. However, it seems that the data is not being shared properly between the two inputs. In the AppCtrl controller, I set Data.FirstName to be equal to lattitude. But when I switch over to ...
As a beginner in the world of local storage in Jquery, I am looking to implement a feature on my Bootstrap 4 accordion. The desired functionality is as follows: If a user is visiting the page for the first time, all accordions should be open by default ...
I am currently working on a project to automate filling out an online login form using local string variables. This is the progress I have made so far: web = (WebView) findViewById(R.id.webview); WebSettings webSettings = web.getSettings() ...
I am having an issue where the child component, ComponentA, is not inheriting the style I have defined in the parent component. <ComponentA style="{'border':'1px solid red'}" /> Any suggestions on how to resolve this? & ...
Hey there, I'm having a bit of trouble with enabling my checkbox once the hyperlink has been visited. Despite clicking the link, the checkbox remains disabled. Can anyone provide some guidance on how to get this working correctly? <script src=" ...
Here is my current data: a = [{"country":"Colombia","date":"1995"}, {"country":"China","date":"1995"},{"country":"USA","date":"1992"}] ...
Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...
While working on a chat program using NodeJS and SocketIO, I faced an issue when deploying it to Heroku Server. It turns out that SocketIO was not functioning properly in the Heroku environment. Upon checking the logs in Heroku, I found no relevant inform ...
Hey there! I'm having an issue with Vue.js where I am trying to navigate to a different .html page that is located in my public folder when clicking a button on the page. <button @click="window.location='public/test.html'">See Results ...
In JavaScript, why is it possible to call a function like this when tested with node.js: ~$ node > function hi() { console.log("Hello, World!"); }; undefined > hi [Function: hi] > hi() Hello, World! undefined > hi)( // Why does this work? Hell ...
I'm currently working on an Angular 5 UI project. In one of my component templates, I have a text area where I'm attempting to set a value from the component.ts file using jQuery. However, for some reason, it's not working. Any suggestions o ...
When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...
I am facing an issue using Puppeteer with NEXT.JS while attempting to capture a screenshot. Everything runs smoothly on localhost, but in production, the captured image comes back with the following error message: Application error - a client-side exceptio ...
I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units ...
After successfully passing my parent state to my child component as a prop named title, I encountered an issue while trying to make a put request using axios with the value of that prop. The problem arose when attempting to use this prop's value in th ...
My model definition includes: appFeatures: [{ name: String, param : [{ name : String, value : String }] }] I am looking to assign a default value to appFeatures, such as: name: 'feature', para ...
Can anyone help me out with a CSS issue I'm having? I've set an image as my background on a webpage and I want it to scroll with the page. Even though I followed some online tutorials, it's still not working for me. It's been a while si ...