I am using CSS3DRenderer for rendering HTML on FBX 3d objects. It’s working fine but when I rotate my scene, HTML is visible through 3D objects like transparent. I am new in Threejs. any advice or guidance would be greatly appreciated. I have recorded a video for your reference https://drive.google.com/file/d/1cwjZwuSWOylvCF_tBoI41J2eYbB0zMB7/view
this.scene = new THREE.Scene();
this.scene2 = new THREE.Scene();
this.addRoulettable();
this.renderThings();
addRoulettable() {
let t = this;
return new Promise((resolve, reject) => {
t.loader.load('../../assets/models/fbx/roulettetable.fbx', function (object) {
object.traverse(function (child) {
if (child['isMesh']) {
child.castShadow = true;
child.receiveShadow = false;
}
if (child instanceof THREE.Mesh) {
var texture = t.textureLoader.load('../../assets/images/leather.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set(0, 0);
texture.repeat.set(50, 50);
});
var dashboard = t.textureLoader.load('../../assets/images/greencloth.png');
child.material = [
new THREE.MeshStandardMaterial({
map: dashboard,
blending: THREE.NoBlending,
roughness: 2,
side: THREE.DoubleSide,
}),
new THREE.MeshPhysicalMaterial({
map: texture
}),
new THREE.MeshPhysicalMaterial({
map: THREE.ImageUtils.loadTexture('../../assets/images/Gradient Diagonal (Color).jpg'),
// blending: THREE.NoBlending,
side: THREE.DoubleSide
}),
new THREE.MeshStandardMaterial({
// map: THREE.ImageUtils.loadTexture('../../assets/images/Gradient Vertical (Color).jpg'),
// blending: THREE.NoBlending,
color: 'orange',
side: THREE.DoubleSide,
roughness: 0.4,
metalness: 0.6,
envMapIntensity: t.settings.envMapIntensity,
envMap: t.reflectionCube
}),
new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: t.settings.roughness,
metalness: t.settings.metalness,
envMapIntensity: t.settings.envMapIntensity,
envMap: t.reflectionCube,
transparent: true,
opacity: 0.6
}),
new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 0,
metalness: 0.7,
envMapIntensity: t.settings.envMapIntensity,
envMap: t.reflectionCube
}),
new THREE.MeshPhysicalMaterial({
color: 0x474645
})
];
}
});
object.position.set(0, 400, 37);
var object3D = new THREE.Object3D;
object3D.add(object);
var positionVector = new THREE.Vector3();
var box = new THREE.Box3().setFromObject(object);
console.log(box.min, box.max, box.getSize(positionVector));
var material = new THREE.MeshBasicMaterial({ wireframe: true });
material.color.set('black')
material.transparent = true;
material.opacity = 0;
material.blending = THREE.NoBlending;
var geometry = new THREE.PlaneGeometry(positionVector.x * 0.85, positionVector.z * 0.53);
var planeMesh = new THREE.Mesh(geometry, material);
planeMesh.position.y = 680;
planeMesh.position.z = 850;
planeMesh.rotation.copy(object.rotation);
planeMesh.rotation.x = -90 * degree;
planeMesh.scale.copy(object.scale);
object3D.add(planeMesh);
t.htmlPlane = planeMesh;
t.rouletTable = object3D;
t.scene.add(object3D);
var dom = document.getElementById('battingUI');
dom.style.height = positionVector.z * 0.53 + 'px';
dom.style.width = positionVector.x * 0.85 + 'px';
t.html = new CSS3DObject(dom);
t.html.position.copy(planeMesh.position);
t.html.rotation.copy(planeMesh.rotation);
t.html.scale.copy(planeMesh.scale);
t.html.buffersNeedUpdate = true;
t.html.uvsNeedUpdate = true;
t.scene2.add(t.html);
resolve(true);
}, undefined, (err) => {
console.error(err);
reject(err);
});
});
}
renderThings() {
let gameContainer = document.getElementById('container');
this.renderer2 = new CSS3DRenderer();
this.renderer2.setSize(this.width, this.height);
this.renderer2.domElement.style.position = 'absolute';
this.renderer2.domElement.style.top = '0';
gameContainer.appendChild(this.renderer2.domElement);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor(0x000000, 0);
this.renderer.setSize(this.width, this.height);
this.renderer.domElement.style.zIndex = 1;
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
gameContainer.appendChild(this.renderer.domElement);
}
