Would it be possible to rotate a loaded texture on a sphere geometry in Three.js without rotating the object itself? I am seeking a way to rotate just the texture applied to the material. Imagine starting with a sphere like this: https://i.sstatic.net/Ol3y7.jpg
And wanting to rotate it in x/y/z direction by n degrees to achieve this look: https://i.sstatic.net/nl7p8.jpg
It's impossible to achieve this task in the current conditions. Even attempting to adjust the texture offset will not yield results, particularly within a loop.
The ideal solution is to rotate the sphere instead:
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
sphere.rotation.y += 0.01;
}
animate();
To achieve the desired visual outcome, my approach would involve configuring the rotation order of a mesh while keeping the UV settings of a texture unchanged.
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(1, 2, 7);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.prepend(renderer.domElement);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.AxesHelper(2));
const orbitRadius = 5;
let orbitPath = new THREE.Path().absarc(0, 0, orbitRadius, 0, Math.PI * 2);
let orbit = new THREE.Line(
new THREE.BufferGeometry().setFromPoints(orbitPath.getSpacedPoints(72)).rotateX(-Math.PI * 0.5),
new THREE.LineBasicMaterial({color: "yellow"})
);
scene.add(orbit);
let globe = new THREE.Mesh(
new THREE.SphereGeometry(2, 16, 8),
new THREE.MeshBasicMaterial({color: "magenta", wireframe: true})
);
globe.rotation.order = "ZYX"; // setting rotation order
globe.rotation.z = THREE.MathUtils.degToRad(23); // adjusting inclination
globe.add(
new THREE.Line(
new THREE.BufferGeometry().setFromPoints([new THREE.Vector2(0, -3), new THREE.Vector2(0, 3)]),
new THREE.LineBasicMaterial({color: "aqua"})
)
)
scene.add(globe);
let clock = new THREE.Clock();
renderer.setAnimationLoop( _ => {
let t = clock.getElapsedTime();
globe.rotation.y = t;
globe.position.x = Math.cos(t * 0.25) * orbitRadius;
globe.position.z = -Math.sin(t * 0.25) * orbitRadius;
renderer.render(scene, camera);
});body{
overflow: hidden;
margin: 0;
}<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>I'm attempting to mark a form control as invalid, however, the following code snippet is not producing the desired result this.currencyForm.controls['currencyMaxSell'].setErrors({smallerThan: true}) ...
When attempting to access the outer "this" scope in Typescript while using getters and setters in object literals, it seems there is no straightforward method. Take for example the code snippet below: class Report { stuff: any[]; options = { ...
I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...
In my Angular 7 application, I am utilizing RxJS to handle asynchronous operations. My goal is to retrieve a list of items from an API endpoint every 30 seconds. However, there are times when the request may take longer than expected, and I want to ensure ...
I am currently developing an Electron app that is designed to launch another application, such as Photoshop, using child_process.execFile. However, I have encountered an issue where if Photoshop is already running when child_process.execFile is called, a n ...
I've been facing a challenge in a Vue project where the request headers have become too large for our servers to handle, resulting in 413 error codes. Using JWT bearer tokens, I can see that the token is included in the request as the Authentication ...
I am currently in the process of verifying if a user's email already exists. To achieve this, I am utilizing Prisma Client's findUnique method. Below is the code snippet I have implemented: const userWithEmail = await prisma.user.findUnique({ ...
I am a beginner with Angular2 and I am currently working on creating a reactive form, specifically an interactive date input field. Here is my HTML code: <div class="date ui-input"> <input type="text" name="dateD" [ngModel]="model.date | dat ...
How can a link be attached to the nodes in 3d-force-graph (https://github.com/vasturiano/3d-force-graph) so that clicking on a node redirects the user to a specific or customized URL? ...
Trying to improve my react app with TypeScript, but encountering issues when typing certain variables. Here's the error message I'm facing: TypeScript error in /Users/SignUpFields.tsx(66,9): Element implicitly has an 'any' type becaus ...
I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...
Suppose I receive a string containing special characters that needs to be transformed using filter/pipe, with the additional requirement of capitalizing the first letter of each word. For instance, transforming "@!₪ test stri&!ng₪" into "Test Stri ...
I have a link to a video file with various formats like mp4, 3gp, etc. When I click on the link, it opens in the same tab. Changing the target attribute to "_blank" makes the video open in a new tab. However, when I ctrl-click the link, the file s ...
Is there a convenient method for lightening a variable color in Three.js to achieve a lighter shade? I have been exploring the documentation, but haven't found an obvious solution. Any tips on color manipulation techniques that could help me achieve ...
I am currently utilizing a third-party library that includes a type defined as the following: export interface ThirdPartyNodeType { id: string; name: string; data: any; } Upon further exploration, I have identified the content that I intend to include ...
Operating under a many-to-many relationship between Category and Product entities In need of filtering products based on category ID Attempted to implement the following code after referring to some examples, but encountered difficulties in making it fun ...
I have a code snippet that defines a person object and a function to get its values: const person = { name: "abc", age: 123, isHere: true }; const getPersonValues = () => { return [person.name, person.age, person.isHere]; }; const [n ...
I'm currently facing a challenge in my Angular project where I have an array of JSON objects. These objects are very similar, differing only in one key-value pair. My goal is to combine these similar objects into one while appending the varying values ...
Each time the button is clicked and if the modelform is invalid, a notification message should be returned instead of proceeding to create a user (createUser). The process should only proceed with this.accountService.create if there are no form validation ...
After deleting the node_modules directory and rebuilding it with npm install, I encountered an error in my angular2 app when using cmd ng serve. Error: 'common-tags' module not found at Function.Module._resolveFilename (module.js:337:15) ...