Currently working with Three.js to create a 3D user interface. After setting up the initial structure and adding some sample shapes, I am facing an issue with rotating the camera around only the Y axis while scrolling up or down. I am coding in Vanilla JS. If anyone has suggestions on how to tackle this problem, your help would be greatly appreciated.
Feel free to use this simplified live demo as a code example:
let camera, scene, renderer;
let cube;
initialize();
display();
function initialize() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 4;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('wheel', scrollHandler);
}
function scrollHandler(event) {
cube.rotation.y += event.deltaY * 0.01;
display();
}
function display() {
renderer.render(scene, camera);
}body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e3eff5e2ffe7f8fafbe6fee9bff7fbfd">[email protected]</a>/build/three.min.js"></script>I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...
This task has me feeling frustrated. I am working on a 3D project with a specific camera angle requirement to use an Orthographic Camera. My challenge is to accurately click on the floor for gameplay purposes, but the ThreeJS Raycast doesn't seem to b ...
Recently, I was told to learn react.js even though my knowledge of javascript is limited. Nevertheless, I decided to dive in and start with a simple "Hello World" project. Initially, when I used the index.js file below and ran webpack -p, everything worke ...
My website is loaded with heavy front-end features and I'm using a loading gif to help with the loading process. However, I've noticed that in Safari, there is a delay before the gif loads after the background does, which takes away from the inte ...
Here is a snippet of code that automatically changes background images: function changeBackground() { currentBackground++; if(currentBackground > 3) currentBackground = 0; $('body').fadeOut(0, function() { $('body&ap ...
Currently, I am utilizing react-three-fiber in conjunction with OrbitControls to showcase a textured sphere with a material on its backside. My goal is for the camera to orbit within the sphere and around its center. While OrbitControls accomplishes this e ...
Trying to execute the code below, I encountered an issue where removing one item from the array did not completely remove it (other checkboxes in each row remained). I attempted using :key="index" but that did not solve the problem. However, changing :key= ...
This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...
While Vuejs is known for being more effective than jQuery for DOM manipulation and user interactions handling, I am curious about its performance when it comes to remote asynchronous HTTP (Ajax) calls. I'm looking for a specific Vue.js core API that c ...
I have a unique application that utilizes both vue and express. I have separate tests for each, allowing me to run either a vue test or an express test independently. Below is the customized jest config file. This configuration works perfectly for Vue tes ...
I would like to transform this text into something like "|| something 1 || something 2 || more || last one ||" and then make all of that string bold by adding "|" around it then it would look like this "|| something 1 || something 2 || more || last one | ...
I am facing an issue with three plus (+) buttons that are next to three separate tables built using DataTables. The problem arises because all the plus buttons were created in one location with DataTables, resulting in them being assigned the same classes ...
Just getting started with Vue.js I'm looking to register a local component following the instructions here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration The catch is that I need to register the component to an existing Vue insta ...
In JavaScript, I am currently learning about accessing objects and sorting them based on multiple conditions. As a beginner in JavaScript, this may seem like a very basic question to some. My task involves sorting based on the 'status' field. va ...
I have an image that I am retrieving on the server side and sending to the web browser through an AJAX call. I need to display this image line by line using WebGL. For example, let's consider an image with dimensions 640X480. This means there are a t ...
I'm struggling with a group of interconnected queries using express/mongoose, structured like this: app.get(..., function(...) { Schema1.query(..., function(..., res1) { for ( var key in res1 ) { Schema2.query(..., function(..., ...
I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...
Below is a code snippet demonstrating how to create an ordered list using JavaScript: Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function() { $("ul").each(function() { $(this).find("li").each(functio ...
My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...
I have come across an interesting challenge while working on a project involving a zoomable treemap. I am currently exploring how to pass and aggregate multiple parameters within the treemap, similar to what is typically done in a zoomable treemap visualiz ...