# How to fix this rendering on label and textarea?

**URL:** <https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322>\
**Category:** Questions\
**Tags:** css-renderer, rendering\
**Created:** [July 14, 2022, 7:14am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322 "2022-07-14T07:14:25Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 7:14am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/1 "2022-07-14T07:14:25Z")

</div>

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/7834c3a64309f3d88772a6b855ebd1f7af77ebed.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/7834c3a64309f3d88772a6b855ebd1f7af77ebed.mp4)
  
In the video I am showing my issue Label and textfield are not stable where is the issue. Below code I am using-

```javascript
// create scene
const scene = new THREE.Scene();
const scene1 = new THREE.Scene();
// create axis helper
// let axisHelper = new THREE.AxesHelper(100);
// scene1.add(axisHelper);
// create camera
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.0001,
    99999
)
camera.position.z = 5;
scene.background = new THREE.Color(0xffffff);

const canvas = document.querySelector('#c');
// create renderer
const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, canvas });
//renderer.shadowMap.enabled = true;
renderer.autoClear = false;
renderer.physicallyCorrectLights = false;
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.autoUpdate = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight);

const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

function hotspot() {
    $("canvas").one('click', function (event) {
        let mouse = new THREE.Vector2();
        mouse.x = (event.offsetX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.offsetY / window.innerHeight) * 2 + 1;
        let [mouseX, mouseY] = d3.pointer(event);
        mouse_position = [mouseX, mouseY];
        mouse_position[0] = mouse_position[0] + 15;
        mouse_position[1] = mouse_position[1] - 15;
        const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
        const raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
        raycaster.setFromCamera(mouse, camera);
        const intersects = raycaster.intersectObjects(hotspots, false);

        if (intersects.length > 0) {
            let dot_count = $(".dot").length;
            let text_count = $(".textField").length;
            const numDiv = document.createElement('div');
            numDiv.className = 'dot';
            numDiv.id = `div_${dot_count}`;
            numDiv.textContent = `${dot_count + 1}`;
            numDiv.style.marginTop = '-1em';
            const Label = new CSS2DObject(numDiv);
            Label.position.set(intersects[0].point.x, intersects[0].point.y, 0.5);
            scene.add(Label);
            const textField = document.createElement('textarea');
            textField.className = 'textField';
            textField.id = `textField_${text_count}`
            const textFieldLabel = new CSS2DObject(textField);
            textFieldLabel.position.set(intersects[0].point.x, intersects[0].point.y, 0.5);
            scene.add(textFieldLabel);
            document.body.appendChild(numDiv);
            document.body.appendChild(textField)

const controls = new OrbitControls(camera, renderer.domElement);
controls.autoRotate = false;

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    render();
    stats.update();
}

// function to render on a screen
function render() {
   
    renderer.render(scene, camera);
    renderer.render(scene1, camera);
    
    labelRenderer.render(scene, camera);
   }

```

Above is the whole code where is the issue is it in rendering or any parameter changed?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 14, 2022, 7:54am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/2 "2022-07-14T07:54:51Z")

</div>

Please describe as concise as possible, how you want the label to behave instead.

Hint: Imagine you’re hiring a developer to implement this label and you’re writing into the contract what you expect the result to be like. Obviously the developer expects the agreed upon pay once he delivers exactly as you specified - nothing more and nothing less.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 8:07am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/3 "2022-07-14T08:07:07Z")

</div>

Sorry, for that. I just need where mouse click happens label and text field stick to that point only if we perform panning and rotating model, they will stick there

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 14, 2022, 8:32am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/4 "2022-07-14T08:32:45Z")

</div>

> [@Gundeep\_Singh](#):
>
> stick to that point … they will stick there

You are clicking a 2D pixel position on screen, but are referring to a 3D position of your mesh. The 3D position which you intended to click is likely off-center wrt. the axis of rotation. It’s likely to become hidden during rotation.

Mixing of 2D and 3D effects is more complicated than you seem to realize.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 8:34am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/5 "2022-07-14T08:34:18Z")

</div>

then how I can change this can you guide me I need to add hotspot when user click on GLB model

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 14, 2022, 11:05am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/6 "2022-07-14T11:05:15Z")

</div>

Maybe label move because you didnt click up because rotating scene or something else

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 11:06am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/7 "2022-07-14T11:06:44Z")

</div>

click up means in which way?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 14, 2022, 11:37am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/8 "2022-07-14T11:37:03Z")

</div>

Clicking a mouse button is inherently a 2D-operation and results in 2D pixel coordinates.  
What you intend to do is, to identify a 3D-mesh. Raycasting can bridge between the two. See [this example](https://threejs.org/examples/#webgl_interactive_cubes).

Once you’ve identified the mesh, …

… you’re dealing with its dimensions (length, width, height). So which 3D-point of the mesh to attach the label to? A natural choice would be (a fixed [pixel] distance from) the center coordinates of the mesh’s bounding box. See [this example](https://threejs.org/examples/#css2d_label) of the application of the [CSS2DRenderer](https://threejs.org/docs/index.html?q=CSS#examples/en/renderers/CSS2DRenderer), which yields consistent results even during rotation and/or panning.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 11:40am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/9 "2022-07-14T11:40:00Z")

</div>

I already saw this examples main thing I wanna know like I am creating div and textarea and then add both into the scene is this good approach?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [July 14, 2022, 11:41am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/10 "2022-07-14T11:41:28Z")

</div>

Sorry, that’s beyond my experience.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 11:46am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/11 "2022-07-14T11:46:03Z")

</div>

you ever worked on how we can add hotspots using raycaster?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 14, 2022, 1:52pm UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/12 "2022-07-14T13:52:46Z")

</div>

If raycast object, then add 3d Label with coordinates of model, not intersection coordinates.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 14, 2022, 2:07pm UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/13 "2022-07-14T14:07:55Z")

</div>

That’s the point i didn’t able to understand can you provide some examples or any other code snippet, i also checked model viewer repo but didn’t able to understand

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 14, 2022, 8:19pm UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/14 "2022-07-14T20:19:47Z")

</div>

[dist\_14.zip](https://discourse.threejs.org/uploads/short-url/we02UBcyqw6d5zPhsMYEIYrp9ao.zip) (34.4 KB)

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6da32089f93f9a9bfcef069dfdafc84997db338.png)

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 15, 2022, 3:48am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/15 "2022-07-15T03:48:50Z")

</div>

bro it gives me an one error of havelabel does not exist of Object3DEvent and my output is shown like this if I comment two lines related to havelabel

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/0/502753599d7550d1c53c3a7a10aa4ab20fc7274f.jpeg)

and my code is below

```javascript
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import Stats from 'three/examples/jsm/libs/stats.module'
import { GUI } from 'dat.gui'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
import * as validator from 'gltf-validator';
import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader';
import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader';
import SpriteText from 'three-spritetext';
import { BackSide, LoaderUtils, Matrix3, MeshBasicMaterial, TextureLoader, WebGLRenderer } from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { SimpleDropzone } from 'simple-dropzone';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import { setupCanvas, clearCanvas, editHotspot } from 'hotspot-js';
import * as d3 from "d3";
// import * as CSM from 'three-csm';
import { CSM } from 'three/examples/jsm/csm/CSM'
import { CSMHelper } from 'three/examples/jsm/csm/CSMHelper'

var can_click = true;

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
camera.position.set(10, 5, 20);
camera.layers.enableAll();
camera.layers.toggle(1);

const controls = new OrbitControls(camera, labelRenderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 100;

const scene = new THREE.Scene();
const pl1 = new THREE.PointLight(0xFEE3B1, 2);
pl1.position.set(-20, 20, 20);
scene.add(pl1);
const clock = new THREE.Clock();

var vs = [];
var fs = [];
var mesh = [];
var tex = [];
var mat = [];
var bend = [];

mesh["bbb_1"] = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 1, 2), new THREE.MeshStandardMaterial({ color: 0xff0000 }));
mesh["bbb_1"].position.set(0, 0, -4);
mesh["bbb_1"].haveLabel = false;
scene.add(mesh["bbb_1"]);

mesh["bbb_1"].layers.enableAll();

mesh["bbb_2"] = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 1, 2), new THREE.MeshStandardMaterial({ color: 0xff0000 }));
mesh["bbb_2"].position.set(8, 0, -4);
mesh["bbb_1"].haveLabel = false;
scene.add(mesh["bbb_2"]);

mesh["bbb_2"].layers.enableAll();

var hotspots = [mesh["bbb_1"], mesh["bbb_2"]];
var text_count = 0;

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

document.addEventListener("mousedown", onDocumentMouseDown, false);

function aaa() {

    if (can_click) { can_click = false; }
    else { can_click = true; }

}

function onDocumentMouseDown(event) {
    console.log();
    if (!can_click) { return; }

    pointer.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
    pointer.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
    raycaster.setFromCamera(pointer, camera);

    const intersects = raycaster.intersectObjects(hotspots);
    console.log(intersects);
    

    if (intersects.length > 0) {
        //if(intersects[0].object.haveLabel==true){ return; }
        text_count++;
        var textField = document.createElement('textarea');
        textField.className = 'textFieldNew';
        textField.id = "textField_" + text_count;
        textField.addEventListener("mousedown", aaa, false);
        var textFieldLabel = new CSS2DObject(textField);
        textFieldLabel.position.set(intersects[0].object.position.x, intersects[0].object.position.y, intersects[0].object.position.z);
        scene.add(textFieldLabel);
        //intersects[0].object.haveLabel=true;

    }

}

function loop() {

    requestAnimationFrame(loop);

    controls.update()
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);

}

loop();

```

where is the issue?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 15, 2022, 5:27am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/16 "2022-07-15T05:27:43Z")

</div>

Maybe bad browser

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 15, 2022, 5:28am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/17 "2022-07-15T05:28:50Z")

</div>

I created one thing can you check recent post I uploaded

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 15, 2022, 7:04am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/18 "2022-07-15T07:04:15Z")

</div>

In your code only added imports and mine code. Textarea offset maybe because some imported code do this offset or browser

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [July 15, 2022, 7:06am UTC](https://discourse.threejs.org/t/how-to-fix-this-rendering-on-label-and-textarea/40322/19 "2022-07-15T07:06:36Z")

</div>

[check this link how it can be solve?](https://discourse.threejs.org/t/how-to-stick-label-at-that-where-user-clicks/40348)