Is there a way to manipulate the rotation of an x3d web object with JavaScript?

My goal is to achieve a similar effect like this response in another post, but with a major difference - I am using an x3d object instead of three.js. The objective is to track the scroll position and utilize it to rotate a 3D object diagonally (from its current position towards the bottom left).

The JavaScript code snippet is as follows:

window.addEventListener("wheel", onMouseWheel);

function onMouseWheel(event){
    camera.position.y += event.deltaY * 5; // Since 'camera' is not defined, can it be replaced?
    camera.position.x += event.deltaX * 10;
}

This is the x3d object being used:

(Due to numerous coordinates, had to paste it externally.)

I have managed to control the zoom of the object by scrolling over it and can also grab and rotate the object using the cursor. However, I need guidance on integrating the rotation with JavaScript when dealing with an x3d object rather than a three.js one. Any assistance would be highly appreciated.

Answer №1

While I'm certainly no expert and have only been exploring this for a few hours, here's what I've discovered:

To start, locate the viewpoint tab and assign it an id such as id="mycam"

<viewpoint id='mycam' DEF='CA_Camera' position='-0 -0 0' fieldOfView='0.691'></viewpoint>

Next, insert this code directly into the "body", right below the </x3d> tag:

    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:-4px;top:-4px;" onclick="down()">Q</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:104px;top:-4px;" onclick="up()">E</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:50px;top:0px;" onclick="forward()">W</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:0px;top:50px;" onclick="left()">A</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:50px;top:50px;" onclick="backward()">S</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:100px;top:50px;" onclick="right()">D</div>
<script>
    var cam_x=0,cam_y=0,cam_z=0;
    function forward(){cam_z=cam_z-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function backward(){cam_z=cam_z+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function left(){cam_x=cam_x-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function right(){cam_x=cam_x+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function up(){cam_y=cam_y+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function down(){cam_y=cam_y-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
</script>

By referencing the assigned id, you can modify its attributes like

mycam.position="0 0 0";
.

Keep in mind that the format should be in vectors such as "0 0 0".

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

The Dialog feature offered by jQuery-UI

Having just started with jQuery, I am looking to implement the jQuery-UI Dialog to display a message containing lengthy text to the user. My goal is to have a "More details" link in each row of my HTML table that will trigger the jQuery Dialog window to op ...

Creating complex concave shapes using Three.js from a point cloud

Currently facing a challenge in dynamically creating shapes in three.js from a point cloud. While ConvexGeometry works well for convex shapes, it becomes complex when dealing with concave shapes. The process involves drawing a line on the 2D plane (red li ...

Utilizing a background image property within a styled component - Exploring with Typescript and Next.js

How do I implement a `backgroung-image` passed as a `prop` in a styled component on a Typescript/Next.js project? I attempted it in styled.ts type Props = { img?: string } export const Wrapper = styled.div<Props>` width: 300px; height: 300px; ...

Create an Angular directive that highlights a div if any of its child inputs have focus

I've developed an Angular directive for a repetitive section containing form elements. My aim is to have the entire section highlighted whenever any input field inside it is focused. template.html <div class="col-md-12 employee-section"> <l ...

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

Tips for overcoming indentation issues using ESLint?

Ever since I started using Vue 3 with ESlint, I've been encountering a new problem. Whenever I try to run my code, I am bombarded with numerous errors like: --fix option.</p> I'm looking for ways to disable this troublesome feature of ESl ...

Using an external module in a Vue SFC: a beginner's guide

Recently delving into Vue, I'm working on constructing an app that incorporates Typescript and the vue-property-decorator. Venturing into using external modules within a Single File Component (SFC), my aim is to design a calendar component utilizing t ...

Encountered a problem with watchify while attempting to run the npm watch command

Hello there, I am currently following a tutorial on scotch.io where I am attempting to create a music player using electron and react. However, when I try to run 'npm run watch' I encounter the following error message: [email protected] watc ...

What could be causing the error message 'Uncaught SyntaxError: Identifier 'randFilmIndex' has already been declared'?

function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min) + min); } function arrayRemove(arr, value) { return arr.filter(function(ele){ return ele != valu ...

What causes my scene to appear black until OrbitControl is activated in ThreeJS?

What causes the scene in ThreeJS to only appear after clicking and moving the cursor? The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly ap ...

Modify a unique custom binding handler in such a way that it is designated using an Immediately Invoked Function Expression

I am currently working on improving a custom binding handler by converting it into an Immediately Invoked Function Expression (IIFE). Despite researching IIFE online, I am still unsure of how to make the necessary changes to my custom handler. Can someon ...

Locating characters within a string using JavaScript

Currently, I am enrolled in JavaScript classes and have come across a challenging question. In this scenario, the task is to create a function named countLetters. This function will take two parameters: 1) sentence - this parameter should be of type stri ...

Is there an issue with using $_POST in an ajax form submission?

Whenever I attempt to verify if a user-inputted name already exists through an ajax form submission, all I receive is an error stating "Undefined index: username" in the sessions.php file. What could be causing this issue? <form action="" method="POST" ...

Error message: "Unexpected token" encountered while using the three.js GLTFLoader() function

I have a requirement to load a .glb model into three.js by using the GLTFLoader. I was able to successfully create a rotating 3D mesh on a canvas without encountering any errors in the console. However, when I tried to replace it with the .glb model, I enc ...

What is the best way to divide my HTML page in half?

My goal is to display two maps side by side, one on the right and the other on the left. However, when I try to implement this, one map appears on top of the other. I believe that CSS positioning can help me achieve the desired layout, but as a beginner in ...

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

I am currently working on an Angular application where I need to implement zoom in and zoom out functionality for a Plotly chart. While the default hoverable mode bar provides this feature, it is not suitable for our specific use case. We require user-cr ...

Inject a jQuery form submission using .html() into a div element

I am currently working on developing a basic forum where users can view listed topics and have the option to add new ones on-the-fly by clicking a link or image. How can I detect and handle the form submission event for the dynamically added form within an ...

iOS Chrome: Enabling Cookies with "Always Allow"

While the Safari browser on OSX has a setting under Privacy & Security -> Block Cookies -> Always Allow, enabling the storage of entries in the browser's local storage even when accessing pages from third party sites like those running in an ifr ...

a problem with the display toggling feature in VueJS regarding the "Show more" / "Show less"

Hey everyone, I am currently working on a filter feature using VueJS and Laravel. I'm facing some challenges with the (Show more) / (Show Less) button functionality. The issues are: Issue 1: Normally when you limit a list of items, it should show a "S ...

Receiving JSON data and saving it into an array in JavaScript

I have a JSON input that contains information about different categories including companies, countries, and persons. { "Categories": { "Facets": [{ "count": 1, "entity": "Company", "Company": [{ ...