Trying to rotate a laser beam correctly

Questions
, ,
1

I’m trying to rotate a laser beam (which is a cylinder). But, it is supposed to have a pivot of the rotation on the edge, which is connected to the caster (a mage). But, it keeps rotating with the pivot on the center of the cylinder, so it’s not working like it should…

        scene.add(magicray.getModel());

        magicray.getModel().rotation.y -= 0.01
2

Maybe these examples from the collection will help you?

ExtendedLineAtoB

ObjectLooksAtAnother

UpdateObjectPositioning

see also Quaternion - Axis, Angle Visualization

3

Can you just give me the code? I don’t quite get what I have to do!

4

see * discourse.threejs.hofk.de at the bottom: GetSources

5

Can you be a little more verbose in the explanation? I don’t get it. I went to the link and GetSources but still don’t understand what you’re trying to make me see

6
  1. Open
    ExtendedLineAtoB
  2. on Windows press Ctrl and U to see the source code.
    (for Apple see link in the internet: How to View the HTML Source Code of a Web Page)

You see the source code and can copy it.


<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/draw-a-line-connecting-two-objects-and-extend-it/22034 -->
<!-- https://jsfiddle.net/prisoner849/8u560zsy/ -->
<head>
  <title> ExtendedLineAtoB </title>
  <meta charset="utf-8" />
<style>
body{
  overflow: hidden;
  margin: 0;
}
</style>

<body> </body>

<script type="module">

//@author prisoner849

import * as THREE from "../jsm/three.module.123.js"; 
import { OrbitControls } from "../jsm/OrbitControls.123.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.GridHelper());

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

let tG = new THREE.BufferGeometry().setFromPoints([
	new THREE.Vector3(),
  new THREE.Vector3()
]);
let tM = new THREE.LineBasicMaterial({color: "yellow"});
let tracker = new THREE.Line(tG, tM);
scene.add(tracker);
let tV = new THREE.Vector3(); // temp vector for re-use

let observer = new THREE.Mesh(new THREE.SphereBufferGeometry(0.25, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
let target = new THREE.Mesh(new THREE.SphereBufferGeometry(0.25, 16, 8), new THREE.MeshBasicMaterial({color: "blue", wireframe: true}));
scene.add(observer, target);

renderer.setAnimationLoop(() => {
	var timer = 0.0005 * Date.now();
  observer.position.x = Math.sin(timer * 3) * 6;
  observer.position.z = Math.cos(timer * 3) * 6;
  //observer.rotation.y  += 0.1

  target.position.x = Math.sin(timer * 2) * 10;
  target.position.z = Math.cos(timer * 2) * 10;
  //target.rotation.y  += 0.1
  
  updateTracker(observer, target);
  
  renderer.render(scene, camera);
})

function updateTracker(o, t){

	let oP = observer.position;
  let tP = target.position;
  let d = oP.distanceTo(tP);
  tV.subVectors(tP, oP).normalize().multiplyScalar(d + 10).add(oP);
  
  tracker.geometry.attributes.position.setXYZ(0, oP.x, oP.y, oP.z);
  tracker.geometry.attributes.position.setXYZ(1, tV.x, tV.y, tV.z);
  tracker.geometry.attributes.position.needsUpdate = true;

}

</script>
</html>
7


Can you see the video? I tryed your way and the rotation looks like this. I’m putting the code:

        scene.add(magicray.getModel());
        var timer = 0.0005 * Date.now();
        magicray.getModel().position.x = Math.sin(timer * 3) * 6;
        magicray.getModel().position.z = Math.cos(timer * 3) * 6;
8

How can I get it to rotate just horizontally like a laser beam coming out of the mage hand?

9

The four lines of code are not enough to understand what you have already done and what you want to achieve.
To get good help here in the forum it is better to create a live example, e.g. jsfiddle (https://jsfiddle.net/) or codepen (https://codepen.io/).

For example, in the above example, the comment has this link to the original fiddle.
Edit fiddle - JSFiddle - Code Playground

However, the example no longer works there because it is not bound to the appropriate version of three.js.
For this reason I always store the appropriate three.js version in my collection.

10

The explanation of the problem that you have is rather vague, an online debuggable version would really help people here to help you.

Considering this:

I might guess that you want to define another pivot point of some model, not the one that it has by default. The easiest way to do this is to put the model in a group, so that the desired pivot point of the model is exactly where is the (0,0,0) of the group. Then, you rotate the group and … that’s all.

Here is a demo how to rotate a cylinder around its edge. The cylinder is called laserBeam (lines 41-47) and it is put inside laserBeamWrapper (lines 38-39). The rotation is done on the wrapper (line 53).

https://codepen.io/boytchev/pen/abPvgPO?editors=0010

1 Like
11

@PavelBoytchev can we enter a call in Discord? I’m adding my magicRay into a group and rotating the group, but nothing happens… not even a error…

12

I’m not available for a discord (or any other) call.

When you add the model in the group, do you also change the position of the model inside the group? (in my demo this is done in line 45). If you do not change this position, there will be no any difference and the result will be the same.