After attempting numerous solutions to the problem, the object continues to rotate around its own axis without any translation.
After attempting numerous solutions to the problem, the object continues to rotate around its own axis without any translation.
If you're looking to enhance the visual appeal of your project, consider making the object a child of another object and rotating it instead...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,// Field of view
w/h,// Aspect ratio
0.1,// Near
10000// Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
var b2 = mkBody(0.2,0xeeeeee)
b2.position.set(1.1,0,0)
b1.add( b2 )
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>An alternative approach would be to manipulate the geometry itself...
var renderer = new THREE.WebGLRenderer();
var w = 300;
var h = 200;
renderer.setSize( w,h );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,// Field of view
w/h,// Aspect ratio
0.1,// Near
10000// Far
);
camera.position.set( 15, 10, 15 );
camera.lookAt( scene.position );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var light = new THREE.PointLight( 0x808080 );
light.position.set( 20, 20, 20 );
scene.add( light );
var light1 = new THREE.AmbientLight( 0x101010 );
light1.position.set( 20, 20, 20 );
scene.add( light1 );
var light2 = new THREE.PointLight( 0x808080 );
light2.position.set( -20, 20, -20 );
scene.add( light2 );
var light3 = new THREE.PointLight( 0x808080 );
light3.position.set( -20, -20, -20 );
scene.add( light3 );
var mkBody=(rad,color)=>{
var sphereGeom = new THREE.SphereGeometry(rad,16,16);
var material = new THREE.MeshLambertMaterial( { color: color } );
var mesh = new THREE.Mesh( sphereGeom, material );
return mesh;
}
var sun = mkBody(2,0xffee00)
scene.add( sun )
sun.material.emissive.set(0x808000)
var b1 = mkBody(0.7,0x80ffff)
b1.position.set(6,0,0)
sun.add( b1 )
b1.updateMatrixWorld();
b1.geometry.applyMatrix(b1.matrixWorld); //Transform the actual geometry...
scene.add(b1); //Now reparent it to the scene
b1.position.set(0,0,0); //And reset its position...
sun.onBeforeRender = function(){
this.rotation.y+=0.01
}
b1.onBeforeRender = function(){
this.rotation.y+=0.1
}
renderer.setClearColor( 0x404040, 1);
(function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
})();<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>Hey there, I'm currently working on integrating a video player using the HTML5 video tag. The content I have is being provided by Brightcove and is in the form of an m3u file. Is it feasible to play this video using the HTML5 video tag? My understand ...
I am faced with a challenge involving a list of numbers and an input form where users can enter any number, which I want to automatically convert to the closest number from my list. My list includes random numbers such as 1, 5, 10, 12, 19, 23, 100, 400, 9 ...
Utilizing Apollo Graphql, I attempted to employ inheritance for retrieving various types of models without success. My goal is to extract specific fields from the objects while omitting those that are unnecessary. To address the issue of incomplete object ...
I have a collection of objects, each containing nested arrays. My goal is to access the specific object inside one of those arrays. How can I achieve this? For instance, take a look at my function below where I currently log each array to the console. Wha ...
UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console! I encountered an unusual bug where the Bootstrap nav-tab functionality ...
Iterating through an array of objects using *ngFor, I apply various filters via pipes to manipulate the resulting list. One of these pipes relies on a user input from a search field. Upon clicking on one of the ngFor elements, the corresponding object is p ...
Running the Jest tests in band is essential to prevent errors from occurring. However, I am unsure of how to resolve this issue. The tests run smoothly when executed through the command line. ...
I'm encountering an issue while attempting to access Blogger through the JavaScript V3 API. Everything functions correctly when accessing my (public) test blog. However, when I use the same code to access my (private) test blog, I encounter an error. ...
I am encountering an issue with the "canvas" screen on my storybook's Vue and Vuetify story. While other components are functioning correctly, this particular one is not working as expected. It appears that my story is unable to identify the 'mob ...
After working on some code that utilizes plain browser Javascript APIs and can be executed within a browser HTML environment (served by IIS Server or Chrome Extensions), I am eager to contribute to the community by creating a library that is not currently ...
I am attempting to append a unit to the value of a textInput: https://i.sstatic.net/EqswS.jpg I have attempted to achieve this with the following code but have not been successful: value = { this.state.totalWeight + " Kgs"} I also tried adding ...
Take a look at this example - While zooming in on the image by pressing ctrl + scroll, the image zooms but the page itself does not scale. Only the image is affected by the zoom. I am attempting to replicate this functionality on my Next.js page. I have ...
This is a JSON response. { "listing": { "id": "1", "name": "Institute Name", "contact": "9876543210", "website": "http://www.domain.in", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...
Experiencing an issue when attempting to concatenate 12 videos together and maintain the audio using xfade and acrossfade filters. Without the audio stream, the video encodes correctly, but when combining with audio, transitions hang and audio sync is off. ...
I'm currently experimenting with the new experimental appDir feature in Next.js 13, and I've encountered a small issue. This project is utilizing: Next.js 13 React 18 MUI 5 (styled components using @mui/system @emotion/react @emotion/styled) T ...
Using jqGrid 4.13.3 - free jqGrid In the Add form, there is a static input element and a select list element. The keyup ajax function is bound to the input element using dataEvents in the beforeInitData event. Once the Add form is displayed, entering a va ...
After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...
After installing jquery-ui's datepicker, I encountered an issue while attempting to implement an event calendar. The datepicker was working fine until I tried to register the beforeShowDay handler using the following code: $('#datePicker'). ...
I have yet to test this on Android, but on iOS, I can confirm that it is not functioning properly. Within my application, there is an input field where users can input text. I am aiming to remove the focus from the input field when a user presses "enter" ...
alert($("select[name="+this.name+"] option:selected").text()); However, I am not receiving any output unless I explicitly specify the name of the combobox instead of using this.name. This issue may be related to the way quotes are being handled. ...