three.js CSS2DObject点击隐藏标签代码示例

hide a css2dobject on click event

three, css2d, renderer, sprite

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4988
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

import * as THREE from '/libs/threejs/r136/three.module.js';

import { OrbitControls } from '//techbrood.com/threejs/examples/jsm/controls/OrbitControls.js';
    import { CSS2DRenderer, CSS2DObject } from '/libs/threejs/r136/CSS2DRenderer.js';

let camera, scene, renderer, labelRenderer;

const clock = new THREE.Clock();
    const textureLoader = new THREE.TextureLoader();

let moon;

init();
    animate();

function init() {

const EARTH_RADIUS = 1;
        const MOON_RADIUS = 0.27;

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

scene = new THREE.Scene();

const dirLight = new THREE.DirectionalLight( 0xffffff );
        dirLight.position.set( 0, 0, 1 );
        scene.add( dirLight );

const axesHelper = new THREE.AxesHelper( 5 );
        scene.add( axesHelper );

const earthGeometry = new THREE.SphereGeometry( EARTH_RADIUS, 16, 16 );
        const earthMaterial = new THREE.MeshPhongMaterial( {
            specular: 0x333333,
            shininess: 5,
            map: textureLoader.load( '//techbrood.com/threejs/examples/textures/planets/earth_atmos_2048.jpg' ),
            specularMap: textureLoader.load( '//techbrood.com/threejs/examples/textures/planets/earth_specular_2048.jpg' ),
            normalMap: textureLoader.load( '//techbrood.com/threejs/examples/textures/planets/earth_normal_2048.jpg' ),
            normalScale: new THREE.Vector2( 0.85, 0.85 )
        } );
        const earth = new THREE.Mesh( earthGeometry, earthMaterial );
        scene.add( earth );

const moonGeometry = new THREE.SphereGeometry( MOON_RADIUS, 16, 16 );
        const moonMaterial = new THREE.MeshPhongMaterial( {
            shininess: 5,
            map: textureLoader.load( '//techbrood.com/threejs/examples/textures/planets/moon_1024.jpg' )
        } );
        moon = new THREE.Mesh( moonGeometry, moonMaterial );
        scene.add( moon );

const earthDiv = document.createElement( 'div' );
        earthDiv.className = 'label';
        earthDiv.textContent = 'Earth';
        earthDiv.style.marginTop = '-1em';
        const earthLabel = new CSS2DObject( earthDiv );
        earthLabel.position.set( 0, EARTH_RADIUS, 0 );
        earth.add( earthLabel );

const moonDiv = document.createElement( 'div' );
        moonDiv.className = 'label';
        moonDiv.textContent = 'Moon';
        moonDiv.style.marginTop = '-1em';
        const moonLabel = new CSS2DObject( moonDiv );
        moonLabel.position.set( 0, MOON_RADIUS, 0 );
        moon.add( moonLabel );

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

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

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

window.addEventListener( 'resize', onWindowResize );

// events handler
        earthDiv.addEventListener('click', function(e){
        	earthLabel.visible = false
        })
        moonDiv.addEventListener('click', function(e){
        	moonLabel.visible = false
        })

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

labelRenderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

requestAnimationFrame( animate );

const elapsed = clock.getElapsedTime();

moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );

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

}

</script>

hide a css2dobject on click event

three, css2d, renderer, sprite

编辑器支持Emmet

快捷键

hide a css2dobject on click event

three, css2d, renderer, sprite

three.js webgpu渲染器加载gltf模型代码示例（Chrome 113版本以上）

three.js Draco模型压缩文件加载代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：