There is a small sketch based of original ThreeJS DecalGeometry example and it works fine. Basically, it has to add logo to the tank center by X axis perpendicular [{0, 0, 0}, {tankRadius, 0, 0}] and everything just added directly to the scene by scene.add(...).
The problem occurs when I try to move all objects into a group THREE.Group(), which by design should have a predefined rotation and scale, i.e. group.rotation.y = -Math.PI / 4;.
body {
margin: 0;
background-color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}<div id="container"></div>
<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
import { DecalGeometry } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/geometries/DecalGeometry.js";
const logo = 'data:image/png;base64,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dHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgIHhtbG5zOnBsdXM9Imh0dHA6Ly9ucy51c2VwbHVzLm9yZy9sZGYveG1wLzEuMC8iCiAgICB4bWxuczpHSU1QPSJodHRwOi8vd3d3LmdpbXAub3JnL3htcC8iCiAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmNjk2MzBmZS02NTMyLTlmNDQtYTcyNS03ZmNlNWVmZjAzZjQiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTM3ODk5N2YtOWNkYi00NTIxLTk1M2EtNjI5M2YxNjU3YTFiIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YWIxYmE3YzgtMjBhYy00ZGNkLWI5MTEtZjAzOTA0Y2EwYzQ4IgogICBHSU1QOkFQST0iMi4wIgogICBHSU1QOlBsYXRmb3JtPSJMaW51eCIKICAgR0lNUDpUaW1lU3RhbXA9IjE3MTYyMDcxNzM0NDQ1NjgiCiAgIEdJTVA6VmVyc2lvbj0iMi4xMC4xOCIKICAgZGM6Rm9ybWF0PSJpbWFnZS9wbmciCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDUtMThUMTM6NDY6NTQrMDM6MDAiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTA1LTE4VDEzOjUwOjI1KzAzOjAwIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wNS0xOFQxMzo1MDoyNSswMzowMCI+CiAgIDxpcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uQ3JlYXRlZD4KICAgPGlwdGNFeHQ6TG9jYXRpb25TaG93bj4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkxvY2F0aW9uU2hvd24+CiAgIDxpcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OkFydHdvcmtPck9iamVjdD4KICAgPGlwdGNFeHQ6UmVnaXN0cnlJZD4KICAgIDxyZGY6QmFnLz4KICAgPC9pcHRjRXh0OlJlZ2lzdHJ5SWQ+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249ImNyZWF0ZWQiCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YWIxYmE3YzgtMjBhYy00ZGNkLWI5MTEtZjAzOTA0Y2EwYzQ4IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNC0wNS0xOFQxMzo0Njo1NCswMzowMCIvPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJzYXZlZCIKICAgICAgc3RFdnQ6Y2hhbmdlZD0iLyIKICAgICAgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxZjdjZTUyMS05MmUzLTQ0YWYtOWUyMi1lYjAzNTAyNTBlNmMiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChNYWNpbnRvc2gpIgogICAgICBzdEV2dDp3aGVuPSIyMDI0LTA1LTE4VDEzOjUwOjI1KzAzOjAwIi8+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjNkNmE5ZTZkLWQ5ZjMtNGExYS05MWM3LTIwOTgwY2QwY2M5YyIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChMaW51eCkiCiAgICAgIHN0RXZ0OndoZW49IiswMzowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgIDxwbHVzOkltYWdlU3VwcGxpZXI+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZVN1cHBsaWVyPgogICA8cGx1czpJbWFnZUNyZWF0b3I+CiAgICA8cmRmOlNlcS8+CiAgIDwvcGx1czpJbWFnZUNyZWF0b3I+CiAgIDxwbHVzOkNvcHlyaWdodE93bmVyPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6Q29weXJpZ2h0T3duZXI+CiAgIDxwbHVzOkxpY2Vuc29yPgogICAgPHJkZjpTZXEvPgogICA8L3BsdXM6TGljZW5zb3I+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7X8G+kAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH6AUUDAw10kQOvAAAEONJREFUeNrt3Xl0VuWBx/FvgECAEA1IBAO4gGJAceG4odOnVBzrruNWrdhRdByttZ7O6dRlWu3YOtp66jLo1IV6XDq2tueorbZax+oddZS6oLEEBeKCiSKLYQkhQELmj/dNcu/N+74JyziafD/n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';
class TankGeometry extends THREE.LatheGeometry {
constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
const path = new THREE.Path();
path.absellipse(0, -length / 2, radius, radius / 2, Math.PI * 1.5, 0);
path.absellipse(0, length / 2, radius, radius / 2, 0, Math.PI * 0.5);
super(path.getPoints(capSegments), radialSegments);
this.type = 'TankGeometry';
this.parameters = {
radius: radius,
length: length,
capSegments: capSegments,
radialSegments: radialSegments,
};
}
static fromJSON(data) {
return new TankGeometry(data.radius, data.length, data.capSegments, data.radialSegments);
}
}
let renderer, scene, camera, controls, group, tank, line, raycaster, intersects = [];
const container = document.getElementById('container');
const intersection = {
intersects: false,
point: new THREE.Vector3(),
normal: new THREE.Vector3()
};
const tankParameters = {
radius: 11,
width: 75
};
const decalMaterial = new THREE.MeshPhongMaterial({
map: new THREE.TextureLoader().load(logo),
normalScale: new THREE.Vector2(1, 1),
shininess: 30,
transparent: true,
depthTest: true,
depthWrite: true,
polygonOffset: true,
polygonOffsetFactor: -2,
wireframe: false
});
const decals = [];
let position = new THREE.Vector3();
let orientation = new THREE.Euler();
init(aftermath);
checkIntersection(window.innerWidth / 2, window.innerHeight / 2);
function aftermath() {
renderer.render(scene, camera);
checkIntersection(window.innerWidth / 2, window.innerHeight / 2);
if (intersection.intersects) {
addDecal();
}
animate();
}
function init(callback_) {
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xFFFFFF);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 120;
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 50;
controls.maxDistance = 200;
scene.add(new THREE.AmbientLight(0x333333));
const dirLight = new THREE.DirectionalLight(0x999999, 3);
dirLight.position.set(1, 0.75, 0.5);
scene.add(dirLight);
group = new THREE.Group();
group.rotation.y = -Math.PI / 4;
scene.add(group);
const lineGeometry = new THREE.BufferGeometry();
lineGeometry.setFromPoints([new THREE.Vector3(0.0, 0.0, 0.0), new THREE.Vector3(16.0, 0.0, 0.0)]);
line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({
color: 0xFF0000
}));
group.add(line);
tank = new THREE.Mesh(new TankGeometry(tankParameters.radius, tankParameters.width, 16, 16), new THREE.MeshBasicMaterial({
color: 0xDDDDDD
}));
tank.geometry.computeVertexNormals();
tank.rotation.x = Math.PI / 2;
tank.name = 'Tank';
group.add(tank);
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
window.addEventListener('resize', onWindowResize);
let moved = false;
callback_();
}
function checkIntersection(x, y) {
if (tank === undefined) {
return;
}
raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
raycaster.intersectObject(tank, false, intersects);
if (intersects.length > 0) {
intersection.normal.copy(intersects[0].face.normal);
intersection.intersects = true;
intersects.length = 0;
} else {
intersection.intersects = false;
}
}
function addDecal() {
const scale = tankParameters.width;
const size = new THREE.Vector3(scale, scale, scale * 0.5);
orientation = new THREE.Euler(-Math.PI / 2, Math.PI / 2, Math.PI / 2, 'XYZ');
position = new THREE.Vector3(tankParameters.radius, 0.0, 0.0);
const m = new THREE.Mesh(new DecalGeometry(tank, position, orientation, size), decalMaterial);
m.renderOrder = 0;
m.name = 'decalLogo';
group.add(m);
}
function removeDecal() {
scene.remove(scene.getObjectByName('decalLogo'));
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
It’s obvious that somehow THREE.Raycaster should consider the group matrix, but all my attempts to insert it, for example, at checkIntersection(x, y) did not lead to results.
Is there any ideas?