Tips for disabling rotation of a glTF model in three.js

I need some assistance with creating a jewelry AR try-on experience using Jeeliz Facetracking and Three.js. The face tracking and model tracking are functioning correctly, but I am facing an issue where the gltf model/scene rotates based on head rotation. I would like to prevent this rotation. Any suggestions on how to achieve this would be greatly appreciated. Thank you in advance.

"use strict";

// Code snippet attached here

Answer №1

To avoid rotation, include the following line in your code and don't forget to import: import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

Make sure to set orbitControls.autoRotate = false;

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

When encountering an "uncaught SyntaxError" in the $.parseJSON function, one may want to investigate

When using this jQuery function, I encounter an Uncaught SyntaxError: Unexpected token u error if the cookie $.cookie('chk_ar') is undefined. function checkBgNoise() { // checks background noise option state, // activates 'on' click i ...

Design a custom screensaver using jQuery that includes a timed delay feature and an alert message

I am currently working on implementing a screensaver feature for my website. Here is the breakdown of what I am trying to achieve: When detecting the onload, clicks, and touches, I want to start a timer that counts 5 seconds. If any of these events are d ...

The number of subscribers grows every time $rootscope.$on is used

I currently have an Angular controller that is quite simple: angular.controller('appCtrl', function ($scope, $rootScope) { $rootscope.$on('channel.message', function () { // do something here } }); In addition, I have a ...

Javascript Steps to trigger a function when selecting the Stay on Page option in Google Chrome

If you're testing my code in the Chrome Browser, hitting refresh will prompt you with 2 options. Leave This Page Stay on This Page By clicking on the Stay on this page button, it should trigger my custom function displayMsg(). Can anyone pr ...

Iterating over an array and placing objects in the scene for each entry results in all objects being placed at the same location

My goal is to populate my three.js scene with an object for each item in an array. However, I'm facing an issue where all the objects are being added to the same position. I'm struggling to figure out how to change the position of each individual ...

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

Obtaining the category value within a slot of the Vuetify calendar

I am struggling to implement hover functionality in the categories view of Vuetify calendar within the body section (slot day-body). When I try to add hover functionality, the entire row ends up being affected by the hover effect, even though I only want i ...

Tips for consuming a REST API to retrieve JSON data and assign it to a variable for use in React JS

I'm currently working on developing a shopping application using React.js. I found inspiration from a sample application on https://codepen.io/paulkim/pen/oZLavq , and now I am looking to fetch product information from an API call. I have attempted to ...

The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...

Error: Unable to locate module: Unable to resolve './Page.module.css' in Next.js version 13

When I run npm run build on Vercel and Heroku, I encounter an error that does not occur on my local computer: The error message is Module not found: Can't resolve './Page.module.css' I am trying to import this file from app/page.tsx, and b ...

The element type provided is not valid: it is expected to be a string (for built-in components) or a class/function (for composite components) but instead it is undefined. This error

I am encountering an error of Element type is invalid: expected a string (for built-in components) or a class/function (for composite components). It seems like I may have forgotten to export my component from the file it was defined in, or there could be ...

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

What is the process for incorporating beforeAnimate and afterAnimate callbacks into a custom jQuery plugin?

Let's imagine I have developed a plugin: // creating the plugin (function($){ $.fn.myPlugIn = function(options){ defaults = { beforeAnimate : function(){}, afterAnimate : function(){} ...

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

Ways to display the modal once the user initiates the action

Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...

Step-by-step guide on transforming jQuery code into Vue JS:

Recently delving into Vue, attempting to translate previous JS + JQuery code into Vue Here is the list I'm working with: <ul id="progressbar"> <li class="active">integration Ip's</li> <li>T ...

Quirky rendering problem in AngularJS

My issue involves creating blocks using data from a JSON file, which includes a background-image path for a div. Here is an example snippet: [ .. { .. .. "smallimg": "../assets/images/dummy/dummy-intro-1.jpg", .. ] On my page, I hav ...

What is the proper way to add a string to a TypeScript array?

When attempting to add a string to a TypeScript array, I am encountering an error stating 'cannot push to undefined'. Is this the correct approach, or should I be using the spread operator instead? api.ts const api: IConfigName = {name: "getKey ...

Having trouble with my routes in Express Router - the page just won't load!

My backend is not functioning properly. The server is starting without any issues, but when I try to access http://localhost:5000/api/items, it just loads indefinitely. I am unsure of what I am doing wrong. Below is my server.js file: const express = requ ...

Another exciting discussion on converting JSON to an HTML table

While I know that asking a question without providing any code is generally discouraged, I am feeling quite lost at the moment. I have some basic JSON files that follow a structure similar to the example below: [{ "key1" : "some value", "key2" : 1 ...