Understanding the significance of this code excerpt in JavaScript

Question

Understanding the significance of this code excerpt in JavaScript

Although I am still new to both the 3D and three JS worlds, I have managed to grasp most concepts. However, when it comes to matrices, I always find myself getting confused.

My goal is to drag a small object on top of other objects in such a way that the small object faces the same direction as the main object (similar to hanging a wall clock on the wall).

Initially, I tried placing an axis helper on top of a rotating cube and implemented a simple logic where the intersecting point provides the position for the small object placement and the face normal of the intersecting object gives the direction for the small object to look at. While this approach worked to some extent, it wasn't entirely effective.

After doing some calculations and researching code snippets for similar tasks, I eventually found success. However, I still don't fully comprehend the underlying logic behind why we perform these specific actions.

this.normalMatrix.getNormalMatrix(intersects[i].object.matrixWorld);
this.worldNormal.copy(intersects[i].face.normal).applyMatrix3(this.normalMatrix).normalize();
this.object.position.addVectors(intersects[i].point, this.worldNormal);
this.lookAtVec.addVectors(this.object.position,this.worldNormal.multiplyScalar(15));
this.object.lookAt(this.lookAtVec);

Another individual successfully created a wall and positioned a small object on top by modifying this line:

this.object.position.addVectors(intersects[i].point, this.worldNormal);

to

this.object.position.copy(intersects[i].point);

This adjustment worked for him, but unfortunately, the same modification did not yield the desired results with my axis helper.

javascript three.js transformation coordinate-transformation normals

Answer 1

Answer №1

Here is one way to approach it. Take a look at the end of the onMouseMove() function:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-3, 5, 8);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var walls = [];

makeWall(Math.PI * 0.5);
makeWall(0);
makeWall(Math.PI * -0.5);

var clockGeom = new THREE.BoxBufferGeometry(1, 1, 0.1);
clockGeom.translate(0, 0, 0.05);
var clockMat = new THREE.MeshBasicMaterial({
  color: "orange"
});
var clock = new THREE.Mesh(clockGeom, clockMat);
scene.add(clock);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var lookAt = new THREE.Vector3();

renderer.domElement.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  intersects = raycaster.intersectObjects(walls);
  if (intersects.length === 0) return;

  clock.position.copy(intersects[0].point);
  clock.lookAt(lookAt.copy(intersects[0].point).add(intersects[0].face.normal));
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

function makeWall(rotY, color) {
  let geom = new THREE.BoxBufferGeometry(8, 8, 0.1);
  geom.translate(0, 0, -4);
  geom.rotateY(rotY);
  let mat = new THREE.MeshLambertMaterial({
    color: Math.random() * 0x777777 + 0x777777
  });
  let wall = new THREE.Mesh(geom, mat);
  scene.add(wall);
  walls.push(wall);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

Here is one way to approach it. Take a look at the end of the onMouseMove() function:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-3, 5, 8);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var walls = [];

makeWall(Math.PI * 0.5);
makeWall(0);
makeWall(Math.PI * -0.5);

var clockGeom = new THREE.BoxBufferGeometry(1, 1, 0.1);
clockGeom.translate(0, 0, 0.05);
var clockMat = new THREE.MeshBasicMaterial({
  color: "orange"
});
var clock = new THREE.Mesh(clockGeom, clockMat);
scene.add(clock);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
var lookAt = new THREE.Vector3();

renderer.domElement.addEventListener("mousemove", onMouseMove, false);

function onMouseMove(event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);

  intersects = raycaster.intersectObjects(walls);
  if (intersects.length === 0) return;

  clock.position.copy(intersects[0].point);
  clock.lookAt(lookAt.copy(intersects[0].point).add(intersects[0].face.normal));
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

function makeWall(rotY, color) {
  let geom = new THREE.BoxBufferGeometry(8, 8, 0.1);
  geom.translate(0, 0, -4);
  geom.rotateY(rotY);
  let mat = new THREE.MeshLambertMaterial({
    color: Math.random() * 0x777777 + 0x777777
  });
  let wall = new THREE.Mesh(geom, mat);
  scene.add(wall);
  walls.push(wall);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Understanding the significance of this code excerpt in JavaScript

Answer №1

Similar questions

Retrieve the folder name after selecting the folder in the input field

Guide to navigating to a particular element using PerfectScrollbar

Unable to set options, such as the footer template, in Angular UI Typeahead

What is the best way to manage undefined status in react after the user chooses to cancel selecting a file?

Including files in node package without specifying the name of the dist directory

Guide on integrating angular-schema-form into an Ionic 2.0 project using typescript

Sending information to components in Angular using Router

How can I access the value of a Mobx Store in a React Class Component?

What is the proper way to call a function in an HTML document?

Issue: TypeError - 'process.env' can only accept a configurable while installing windows-build-tools

I encountered the following error: Failed to parse due to the module '@babel/preset-react' being missing

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Copy both the image and JSON object to the clipboard

"Failure to Update: Ajax Auto-Refresh Table Failing to Refresh

Guide for creating a function that accepts an array containing multiple arrays as input

JavaScript JSON request denied

Encountering issues with a React Native Application crashing in release mode, but successfully rendering a 3D .glb model using React Three Fiber in debug mode

Trouble with Bootstrap 5 Dropdown Menu failing to drop down

Updating a JSON file with new object using node.js

Numerous toggles available for the mobile version