body{
  overflow: hidden;
  margin: 0;
}
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

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

window.addEventListener("resize", event => {
  camera.aspect = innerWidth, innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

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

let angle = Math.PI / 3;

let obj = new THREE.Group();
let objPointer = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 36), new THREE.MeshNormalMaterial());
objPointer.geometry.translate(0, 0.5, 0);
objPointer.geometry.rotateX(Math.PI * 0.5);
obj.add(objPointer);
let objTailCone = new THREE.Mesh(new THREE.ConeGeometry(Math.sin(angle * 0.5) * 10, 10, 36), new THREE.MeshBasicMaterial({transparent: true, opacity: 0.25}));
objTailCone.geometry.translate(0, -5, 0);
objTailCone.geometry.rotateX(Math.PI * 0.5);
obj.add(objTailCone);
scene.add(obj);

let targetObj = new THREE.Mesh(new THREE.SphereGeometry(0.25), new THREE.MeshBasicMaterial({color: "blue"}));
scene.add(targetObj);

let clock = new THREE.Clock();

let dirO = new THREE.Vector3(0, 0, 1);
let dirT = new THREE.Vector3();

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime();
  obj.rotation.set(0, -t * 0.05, 0);
  obj.updateMatrixWorld();
  targetObj.position.set(Math.cos(t * 0.31), 0/*Math.sin(t * 0.21) * 0.1*/, -Math.sin(t * 0.27)).multiplyScalar(7);
  targetObj.updateMatrixWorld();
  
  obj.worldToLocal(dirT.copy(targetObj.position).normalize());
  let d = dirO.dot(dirT);
  targetObj.material.color.set((d < -Math.cos(angle * 0.5)) ? 0xff0000 : 0x0000ff);
  
  renderer.render(scene, camera);
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.