Does anyone know how to advance the position of an object in Three.js?
I've been thinking about converting rotation.x, y, z into a vector and manipulating it that way. However, as a beginner, I'm unsure of how to proceed. Any guidance would be greatly appreciated.
Object3D provides useful functions for this purpose.
object.translateZ( 10 );
Check out this response from @mrdoob, the mastermind behind ThreeJS:
object.translateZ( delta );
===PREVIOUS ANSWER===
If you're looking for a tutorial that was designed for an older version of ThreeJS, you can try:
// Set the position of YOUR_OBJECT
YOUR_OBJECT.position.x = 10;
YOUR_OBJECT.position.y = 50;
YOUR_OBJECT.position.z = 130;
Additional options:
var STEP = 10;
var newCubeMatrix = cube.matrix;
newCubeMatrix.identity();
//newCubeMatrix.multiplySelf(THREE.Matrix4.rotationYMatrix(cube.rotation.y));
newCubeMatrix.multiplySelf(THREE.Matrix4.translationMatrix(cube.position.x, cube.position.y, cube.position.z + STEP));
cube.updateMatrix();
For more information, check out this resource:
In the realm of space, the camera is just a single point positioned there. Another point labeled as "Forward" exists within this space as well. To bring the camera closer to this "forward" location, all you need are the coordinates of that second point.
At times, adjusting your direction might entail movements in left and right directions, prompting the use of polar coordinates.
Feel free to customize these values for ease of use:
var scene;
var camera;
var playerDirection = 0; //angles 0 - 2pi
var dVector;
var angularSpeed = 0.01;
var playerSpeed = 0.075;
var playerBackwardsSpeed = playerSpeed * 0.4;
This function serves to initialize the scene:
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 5;
dVector = new THREE.Vector3( 0, 0, 0 ) ;
camera.lookAt( dVector );
animate();
}
Player movement halts when the up key is pressed.
function key_up(event){
playerIsMovingForward = 0;
playerIsMovingBackwards = 0;
playerIsRotatingLeft = 0;
playerIsRotatingRight = 0;
playerGoesUp = 0;
playerGoesDown = 0;
}
During player movement, position updates occur based on specific actions:
function updatePlayer(){
if(playerIsRotatingLeft){ // rotate left
playerDirection -= angularSpeed;
}
if(playerIsRotatingRight){ // rotate right
playerDirection += angularSpeed;
}
if(playerIsRotatingRight || playerIsRotatingLeft){
setPlayerDirection();
}
if(playerIsMovingForward){ // go forward
moveForward(playerSpeed);
}
if(playerIsMovingBackwards){ // go backwards
moveForward(-playerBackwardsSpeed);
}
}
For directional input via WASD keys:
function key_down(event){
var W = 87;
var S = 83;
var A = 65;
var D = 68;
var minus = 189;
var plus = 187;
var k = event.keyCode;
console.log(k);
if(k == A){ // rotate left
playerIsRotatingLeft = 1;
}
if(k == D){ // rotate right
playerIsRotatingRight = 1;
}
if(k == W){ // go forward
playerIsMovingForward = 1;
}
if(k == S){ // go back
playerIsMovingBackwards = 1;
}
}
The player's movement speed aligns with their browser capabilities. Adjustments may be necessary in this regard.
function animate() {
requestAnimationFrame( animate );
updatePlayer();
renderer.render( scene, camera );
}
The following piece of code handles the movement of the camera towards the dVector object location, ensuring the direction vector remains oriented forward from the camera:
function moveForward(speed){
var delta_x = speed * Math.cos(playerDirection);
var delta_z = speed * Math.sin(playerDirection);
var new_x = camera.position.x + delta_x;
var new_z = camera.position.z + delta_z;
camera.position.x = new_x;
camera.position.z = new_z;
var new_dx = dVector.x + delta_x;
var new_dz = dVector.z + delta_z;
dVector.x = new_dx;
dVector.z = new_dz;
camera.lookAt( dVector );
}
Advancing forward often entails adjustments in left and right directions. Here's some code that accomplishes this task using polar coordinates to shift the point relative to the camera by a specified degree (in radians):
function setPlayerDirection(){
//direction changed.
var delta_x = playerSpeed * Math.cos(playerDirection);
var delta_z = playerSpeed * Math.sin(playerDirection);
var new_dx = camera.position.x + delta_x;
var new_dz = camera.position.z + delta_z;
dVector.x = new_dx;
dVector.z = new_dz;
console.log(dVector);
camera.lookAt( dVector );
}
animate();
I trust this information proves helpful.
A different approach could be utilizing the set function within Vector3.
location.set(x, y, z);
Is there a way to whitelist two IP ranges in order to access my firebase cloud functions? I believe it should be possible to define them within this code snippet: const cors = require('cors')({ origin: true }); I tried searching on Google f ...
I have a unique customized collapsible FAQ feature that adjusts its height based on whether it's expanded or collapsed. import { useState, useRef, useEffect } from "react"; export default FAQItem({title, description}: FAQItemProps) { cons ...
As I was creating my context, I set an initial state and passed the necessary functions for useContext. Although this method is functional, I'm concerned it may present challenges in larger projects. Does anyone have suggestions for a more efficient a ...
After dedicating the past week to experimenting with Three.js and WebRTC, I find myself feeling like I have exhausted all available documentation on this particular subject. My current challenge involves mapping uniform sampler2D tDiffuse; to a vertex shad ...
I am interested in creating a function that can return a component with specific props assigned to it. Something like a reusable component for Text/View/Pressable, where styles can be extracted and passed as props. Personally, I find it more efficient to s ...
My dilemma involves a listing of items, each accompanied by a "caret-down" icon. My goal is for clicking on the icon to reveal more information beneath the item, while changing the icon to "caret-up". Subsequently, clicking on the icon again should hide th ...
I am facing an issue with my app that runs Rails in the backend and Javascript in the frontend. The controllers, routes, and CORS are all set up correctly. Both my Post and Get requests work without any problems. However, when I attempt to make a patch req ...
Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...
In my Node.js code, I have the following: var getQuestionsByUserId = function (config) { var query = { _id: ObjectId(String(config.userId)) }; var projection = { categoryIds: true, _id: false }; var respondWithCategories = function (error, doc ...
In the development process, we often encounter the need to re-initialize data structures. One common method is as follows: function initialData() { return { is_active: true, is_collapsed: true, resetable_data: 'value' ...
I am dealing with two observables, obs1 and obs2, that continuously emit items without completing. I anticipate that both of them will emit the same number of items over time, but I cannot predict which one will emit first. I am in need of an observable th ...
I have a Box Component where ListItems are wrapped. For each child, I have a border-bottom of 1px solid class set for the Box component, but I don't want it for the last child. How can I achieve that? {data.map((item, i) => { return ...
There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...
Here is a simplified diagram of a document in my Model: { ar1: [ { b: { ar2: [{ _id: 1, value: 2 }], }, }, { b: { ar2: [{ _id: 2, value: 2 }], }, ...
I am trying to obtain the value from a JSON file that is located on the server. To retrieve this value, I am using AJAX. However, when checking the console for errors, I receive the following message: Cross-Origin Request Blocked: The Same Origin Poli ...
I'm currently in the process of developing a messaging application and I'd like to implement a feature that automatically reloads the page every minute so users can see new messages without having to manually refresh. While I have some knowledge ...
When a menu item is clicked, I execute the following code: import React, { Component } from 'react'; import 'react-dropdown-tree-select/dist/styles.css'; import { connect } from 'react-redux'; import '../../../css/tree.c ...
After attempting to set the execution policies to unrestricted, I was able to resolve my dummy server error, but I encountered an issue creating package.json. The output is displayed below. Please note that I tried both npm init and npm init -y PS C:&bso ...
I am currently working on a website that revolves around the theme of weather. I have reached a point in the development process where I need the icon to change according to the current weather conditions. let updateIcon = () => { let ic ...
I'm encountering a strange issue where every time I push an object to the array, the array's length increases as expected. However, the object that I push last ends up overriding all other objects. I can't seem to figure out my mistake, so p ...