Utilized OBJLoader to load an item successfully; now seeking guidance on calculating the coordinates of an element within (three.js)

Question

Utilized OBJLoader to load an item successfully; now seeking guidance on calculating the coordinates of an element within (three.js)

I am utilizing three.js and OBJLoader to create a 3D human head representation:

let renderer, camera, scene, head, light, projectiles;

new THREE.OBJLoader().load(objUrl, initialize);

function initialize(obj) {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);

  scene = new THREE.Scene();

  head = obj.clone();
  head.children.forEach(child => child.material = new THREE.MeshPhongMaterial({ color: "#ffc700" }));
  head.position.y = -34;
  head.position.z = -110;
  scene.add(head);
  
  light = new THREE.SpotLight();
  light.target = head;
  scene.add(light);
  
  projectiles = [];

  window.addEventListener("mousedown", createProjectile, false);

  animate();
}

function animate() {
  head.rotation.y += THREE.Math.degToRad(1);

  projectiles.forEach(updateProjectile);

  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function createProjectile() {
  let projectile = new THREE.Mesh();
  projectile.material = new THREE.MeshToonMaterial({ color: "#ff0000" });
  projectile.geometry = new THREE.SphereGeometry(3, 20, 20);
  projectile.position.copy(getMouthPosition());
  scene.add(projectile);
  projectiles.push(projectile);
}

function updateProjectile(projectile) {
  // TODO: Move projectile in the direction the mouth was facing when projectile was first created.
  projectile.position.x += 2;
}

function getMouthPosition() {
  // TODO: Determine the world position of the mouth.
  let box = new THREE.Box3().setFromObject(head);
  return box.getCenter();
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js">
</script>

<script src="https://wzrd.in/standalone/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccb8a4bea9a9e1a3aea6e1a0a3ada8a9be8cfde2fde2ff">[email protected]</a>">
</script>

<script>
  threeObjLoader(THREE);
  objUrl = "https://cdn.rawgit.com/mrdoob/three.js/f32fc45/examples/obj/walt/WaltHead.obj";
</script>

On mouse click, I aim to launch a bullet/projectile from the moving head's mouth. However, there are two functions that need implementation, as indicated by the TODO comments: getMouthPosition() and updateProjectile().

To determine the current mouth position for getMouthPosition(), I am looking to spawn the projectile slightly in front of the mouth.

Regarding updateProjectile(), the goal is to move the projectile based on the direction the head was facing at the moment of creation.

If anyone has insights or suggestions on how to tackle these functions, it would be highly appreciated. Thank you.

javascript three.js

Answer 1

Answer №1

Listen up! At some point, you'll need to find the exact location of the mouth (the coordinates within the head group are approximately [0, 25, 20]). To pinpoint the position of the spinning head's mouth, utilize the .localToWorld(v) method in this manner:

head.localToWorld(mouthPosition.copy(spawnPoint.position));

The spawnPoint serves as a guiding object indicating our spawn point.

In addition, understanding the direction your head is facing is crucial. Retrieve this information using another method called .getWorldDirection() belonging to the head entity.

To sum it all up: armed with knowledge about the head's mouth position and its orientation, launching a projectile becomes feasible using those precise values.

let renderer, camera, scene, head, light, projectiles, spawnPoint, clock = new THREE.Clock(), delta = 0;

new THREE.OBJLoader().load(objUrl, initialize);

function initialize(obj) {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);

  scene = new THREE.Scene();

  head = obj.clone();
  head.children.forEach(child => child.material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff }));
  head.position.y = -34;
  head.position.z = -110;
  scene.add(head);
  
  light = new THREE.SpotLight();
  light.target = head;
  scene.add(light);
  
  spawnPoint = new THREE.Mesh(new THREE.SphereGeometry(1, 4, 2), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
  spawnPoint.position.set(0, 25, 20);
  head.add(spawnPoint);
  
  projectiles = [];

  window.addEventListener("mousedown", event => { createProjectile(); }, false);
  
  animate();
}

function animate() {
  delta = clock.getDelta();
  
  requestAnimationFrame(animate);
  
  head.rotation.y += THREE.Math.degToRad(20) * delta;

  projectiles.forEach(p => {
    p.position.addScaledVector(p.userData.direction, p.userData.speed * delta);
  });

  renderer.render(scene, camera);
}

function createProjectile() {
  let projectile = new THREE.Mesh();
  projectile.material = new THREE.MeshToonMaterial({ color: 0xff0000 });
  projectile.geometry = new THREE.SphereGeometry(3, 16, 12);
  let pos = getMouthPosition();
  console.log("pos", pos);
  projectile.position.copy(pos);
  projectile.userData.direction = new THREE.Vector3().copy(head.getWorldDirection().normalize());
  console.log(projectile.userData.direction);
  projectile.userData.speed = 50;
  scene.add(projectile);
  projectiles.push(projectile);
  console.log(projectiles);
}

function getMouthPosition() {
  let mouthPosition = new THREE.Vector3();
  console.log("spawnPoint", spawnPoint);
  head.localToWorld(mouthPosition.copy(spawnPoint.position));
  console.log("mouthPosition", mouthPosition);
  return mouthPosition;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js">
</script>

<script src="https://wzrd.in/standalone/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="defab6acbbbbf3b1bcb4f3b2b1bfbabbac9eeff0eff0ed">[email protected]</a>">
</script>

<script>
  threeObjLoader(THREE);
  objUrl = "https://cdn.rawgit.com/mrdoob/three.js/f32fc45/examples/obj/walt/WaltHead.obj";
</script>

Answer 2

Listen up! At some point, you'll need to find the exact location of the mouth (the coordinates within the head group are approximately [0, 25, 20]). To pinpoint the position of the spinning head's mouth, utilize the .localToWorld(v) method in this manner:

head.localToWorld(mouthPosition.copy(spawnPoint.position));

The spawnPoint serves as a guiding object indicating our spawn point.

In addition, understanding the direction your head is facing is crucial. Retrieve this information using another method called .getWorldDirection() belonging to the head entity.

To sum it all up: armed with knowledge about the head's mouth position and its orientation, launching a projectile becomes feasible using those precise values.

let renderer, camera, scene, head, light, projectiles, spawnPoint, clock = new THREE.Clock(), delta = 0;

new THREE.OBJLoader().load(objUrl, initialize);

function initialize(obj) {
  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight);

  scene = new THREE.Scene();

  head = obj.clone();
  head.children.forEach(child => child.material = new THREE.MeshPhongMaterial({ color: Math.random() * 0xffffff }));
  head.position.y = -34;
  head.position.z = -110;
  scene.add(head);
  
  light = new THREE.SpotLight();
  light.target = head;
  scene.add(light);
  
  spawnPoint = new THREE.Mesh(new THREE.SphereGeometry(1, 4, 2), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
  spawnPoint.position.set(0, 25, 20);
  head.add(spawnPoint);
  
  projectiles = [];

  window.addEventListener("mousedown", event => { createProjectile(); }, false);
  
  animate();
}

function animate() {
  delta = clock.getDelta();
  
  requestAnimationFrame(animate);
  
  head.rotation.y += THREE.Math.degToRad(20) * delta;

  projectiles.forEach(p => {
    p.position.addScaledVector(p.userData.direction, p.userData.speed * delta);
  });

  renderer.render(scene, camera);
}

function createProjectile() {
  let projectile = new THREE.Mesh();
  projectile.material = new THREE.MeshToonMaterial({ color: 0xff0000 });
  projectile.geometry = new THREE.SphereGeometry(3, 16, 12);
  let pos = getMouthPosition();
  console.log("pos", pos);
  projectile.position.copy(pos);
  projectile.userData.direction = new THREE.Vector3().copy(head.getWorldDirection().normalize());
  console.log(projectile.userData.direction);
  projectile.userData.speed = 50;
  scene.add(projectile);
  projectiles.push(projectile);
  console.log(projectiles);
}

function getMouthPosition() {
  let mouthPosition = new THREE.Vector3();
  console.log("spawnPoint", spawnPoint);
  head.localToWorld(mouthPosition.copy(spawnPoint.position));
  console.log("mouthPosition", mouthPosition);
  return mouthPosition;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js">
</script>

<script src="https://wzrd.in/standalone/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="defab6acbbbbf3b1bcb4f3b2b1bfbabbac9eeff0eff0ed">[email protected]</a>">
</script>

<script>
  threeObjLoader(THREE);
  objUrl = "https://cdn.rawgit.com/mrdoob/three.js/f32fc45/examples/obj/walt/WaltHead.obj";
</script>

Utilized OBJLoader to load an item successfully; now seeking guidance on calculating the coordinates of an element within (three.js)

Answer №1

Similar questions

DOMException: Access to property "apply" on a cross-origin object has been denied

odd appearance when objects make contact with one another

Unable to Deselect Checkbox (HTML)

What is the proper way to retrieve the correct value in JavaScript?

What is the method to change the state of Bootstrap 4 buttons in a mobile view without using CSS classes as a reference?

Creating an eternal loop within the useEffect hook in order to monitor the presence of a specific property within the window object

What could be the reason my code isn't successfully performing addition within the input field?

Trouble with Mongoose save() function failing to update data

Tips on working with an array received from a PHP script through AJAX

When React JS and PHP(Mysql) combine, the error message "records.map is not a function" may appear

What is the best way to manage a multi-select dropdown with checkboxes in Selenium Webdriver?

Dividing a string using regex to deal with numerical issues

Event delegation will be ineffective when the target element is nested within another element

Ways to pause for the completion of multiple HTTP promises and display a modal exclusively when all promises result in failure

Using a parameter as a key index in JavaScript

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

What is the process for incorporating the 'url-regex' npm package into an Angular(2/4) project?

Instructions for attaching an event listener to a Threejs Mesh Object with the help of threex dom events

Searching for matching strings in jQuery and eliminating the parent div element

Failed to transfer CryptoKey to Express server