While working with three.js, I encountered an issue involving a conflict between dat.gui.js and trackballControl.js. After modifying values using dat.gui, I noticed that I couldn't rotate the camera with the mouse due to it being trapped within the GUI area. What could be causing this problem and how can it be resolved?
When using the trackballControls constructor, you have the option to provide a second argument which is a dom element.
If this argument is not supplied, the mouse event listeners for the controls will be attached to the document, which can lead to issues.
Without seeing your code, it's difficult to provide an exact solution that will work for you.
But generally, you should pass the renderer dom element to the trackballControls to resolve any problems.
For example:
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
// Pass dom element to trackballControls.
controls = new THREE.TrackballControls(camera, renderer.domElement);
Run the snippet below for a functional example.
var camera, scene, renderer, mesh, material, controls, gui, directionalLight;
init();
render();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Add TrackballControls with dom element.
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.addEventListener('change', render);
// 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);
scene.add(light);
// Create directional light and add to scene.
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Resize listener.
window.addEventListener('resize', onWindowResize, false);
// GUI
var gui = new dat.GUI();
var lightFolder = gui.addFolder('Light');
lightFolder.add(directionalLight, 'intensity').onChange(function(){render()});
lightFolder.open();
}
function animate() {
requestAnimationFrame(animate);
controls.update();
}
// Called by controls change or gui change only.
function render() {
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
controls.handleResize();
}body {
margin: 0px;
}<script src="https://cdn.rawgit.com/dataarts/dat.gui/v0.6.2/build/dat.gui.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...
Is it possible to create a to-do list using only JavaScript in an HTML file with a single div tag? Here is my HTML file for reference: example Here is the structure of my HTML file... <!DOCTYPE html> <html lang="en"> <head> ...
My search for an NPM package that can handle this task has been fruitless so far. I am in need of a cron library that can convert a monthly cron job into easily readable text. For example, inputting 0 0 14 * * should output "Monthly", rather than the curre ...
<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...
Currently, I am fetching data from a JSON file: [ { "video": "video/preroll" }, { "video": "video/areyoupopular" }, { "video": "video/destinationearth" }] I have attempted to use console.log at different stages and encountered an issue when p ...
Utilizing a JQuery DatePicker to be constantly displayed, I have assigned it to a div. Despite wanting it to display the selected date in the input box like in this example, it just isn't functioning as desired for me. Is there a way to have the selec ...
Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...
This HTML snippet displays a data table with test data and corresponding dropdown options. <tr> <th> Test Data </th> <th> Test Data ...
I have encountered an issue with my Angular Js app when attempting to retrieve json data from my web server (which is created using codeigniter). It seems that while other urls provide the expected json data response, mine does not. Here is the Angular js ...
Looking for assistance on how to display hierarchical data from two tables - reporting and employee_details. The reporting table includes supervisor_id and subordinate_id fields which correspond to emp_id in the employee_details table. This hierarchy spa ...
I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...
Currently, I am utilizing https://github.com/zo0r/react-native-push-notification to display notifications. Specifically, I am using scheduled notifications with datetimepicker. Previously, I have successfully used this in another project without any errors ...
I am looking to input a number into a text box and retrieve all the even numbers using ajax with Django. Here is my view: load_template @csrf_exempt def load_template(request): if request.method == 'POST': num1 = request.POST[&a ...
In my form, I have four inputs: token_name, token_expire_date, token_issue_date, and token_value. The first two require user input, while the second two are predetermined values (token_issue_date and token_value). Despite being predetermined, I need all th ...
I have encountered a conflict with the jQuery link while using the LIMITLESS theme. Can someone please assist me in resolving this issue? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> The conflict is ...
Currently, I am learning JavaScript and have encountered another challenge along the way. I am looking for assistance in understanding the concept, whether it is a solution in jQuery or Angular. I have two types of tasks in my HTML - audio or graphic. The ...
In my current Vuex state, I have defined a getter named configs, which looks like this: configs: { 1303401: { exampleValue: 'test' } } There is also an input where I bind the exampleValue from the Vuex store's state using v-mo ...
I attempted to click on a button and encountered this structure: https://i.sstatic.net/GyGk3.jpg <div class="button-wrapper" id="button-verify-wrapper"> <a x-ng-click="verifySfdcConnection()" class="clearfix float-left button-green"> ...
I am currently using async/await to execute a query to the database and receive the result. However, I encountered an error in the browser console that says: Unhandled promise rejection TypeError: "games is undefined" In my code, there are two function ...
My goal is to add animation to the text within the list. Below is the code snippet: <div id="about" class="row section"> <div class="col-sm-8"> <h2 style="color:black;">About me!</h2> <ul> <li > ...