Can you provide me with the exact formula that should be used in the animate function?
Can you provide me with the exact formula that should be used in the animate function?
To achieve the desired effect, my approach would involve placing the cube within a group and then manipulating the rotation of the group itself.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh( geometry, material );
camera.position.z = 2;
const group = new THREE.Group();
group.add( cube );
scene.add( group );
cube.rotation.x = THREE.Math.degToRad(90-35.264);
cube.rotation.y = Math.PI / 4;
const render = function () {
requestAnimationFrame( render );
group.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>Consider aligning the geometry of your box along the Y-axis and rotating the box around that axis as an alternative approach:
body{
overflow: hidden;
margin: 0;
}<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
scene.add(new THREE.AxesHelper(5));
var g = new THREE.BoxBufferGeometry(5, 5, 5);
g.rotateY(Math.PI * 0.25);
g.rotateX(THREE.Math.degToRad(54.736)); // angle between box's bottom side and box's main diagonal is 35.264, so you need 90-35.264 = 54.736
var m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
var o = new THREE.Mesh(g, m);
scene.add(o);
renderer.setAnimationLoop(()=>{
o.rotation.y += 0.01;
renderer.render(scene, camera);
});
</script>Do you think there is a more efficient way to write this code? It seems quite impractical and takes up a lot of space. Essentially, it's about the random chance of obtaining a rarity, like acquiring an Uncommon sword. if (Math.random() * 100 < 100 ...
Having trouble accessing a function defined by my colleague for a click event. The code snippet provided below is causing issues, any ideas on what could be wrong? function Start(data) { this.move= function() { .... }; $('.button').click( ...
I need to retrieve data from my Supabase table using the ID provided in the URL slug, for example localhost:3000/book/1, and then display information about that specific book on a page built with Next.js. Table https://i.stack.imgur.com/t5z7d.png book/[ ...
Currently, I am struggling to find a solution on how to dynamically update a section of a webpage using JavaScript when a user modifies an input field in another part of the same page. Unfortunately, my use of document.write is inhibiting me from making th ...
I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected: https://i.stack.imgur.com/Pw9AH.png & ...
Incorporating the bootstrap-select plugin (found at ) into a ruby on rails app with Vue.js as the javascript framework has been my latest project. The goal is to have two select options where one selects a category and the other displays all available tea ...
Encountering JSON parsing issues with multiple JSON objects. JSON data is essential for JavaScript functionality. { "name": "Sara", "age": 23, "gender": "Female", "department": & ...
Here is an example of HTML: <div class="sortable-buttons"> <ul> <li><a>Recent</a></li> <li><a>Popular</a></li> <li><a>Being Discussed</a></li> </ul> </div ...
I've integrated the node-login module for user login on my website. Once a user logs in, the dashboard.html page is rendered: app.get('/', function(req, res){ // Check if the user's credentials are stored in a cookie // if (req.coo ...
I am using jQuery to dynamically add an image but I am unable to retrieve its dimensions (width and height). Below is the snippet of code from my HTML file: <input type="checkbox" id="RocketElement" data-id="1"> And here is the JavaScript/jQuery c ...
Hello, I am currently attempting to save a model to the database. I am simply inputting the value of a title in order to save it, as my id is set to auto increment. However, I have encountered an issue where my attempts have been unsuccessful. Can someone ...
Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...
I have some HTML input fields in my index.html file. <input type="text" id="handle" > <input type="text" id="message" > <button id="send">send</button> After filling in the information and clicking "send", I want to pass this data ...
I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...
My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...
In my react.js application, I have a Component that displays an error code. It currently looks like this: https://i.stack.imgur.com/2usiy.png Now, in addition to displaying just the code, I also want to show the reason for the error. Similar to how this ...
I designed a pair of buttons with a single label below. Both buttons acted as standalone entities. <label for="buttons" class ="val">0</label> <input class="btn btn-primary button1" type="button" ...
Click here to see a demo plunker that will help you understand my issue. On my main page, I have a table. Each table row is followed by a hidden empty row. When the first row is clicked, I use a directive to inject HTML into the empty row below it. Main ...
I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...
Utilizing an Ajax call, I am invoking the following GET function every 10 seconds to monitor the status of various URLs. app.get('/getUrl', function(req, res) { var response = {}; var keyArr = []; var urlData ...