three.js线条（和虚线段）交互代码示例

mouse hover click on line in three.js

three, line

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

import * as THREE from '/libs/threejs/r136/three.module.js';
    let container, stats;
    let camera, scene, raycaster, renderer, parentTransform, sphereInter;

const pointer = new THREE.Vector2();
    const radius = 100;
    let theta = 0;

init();
    animate();

function init() {

container = document.createElement( 'div' );
        document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );

scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );

const geometry = new THREE.SphereGeometry( 5 );
        const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

sphereInter = new THREE.Mesh( geometry, material );
        sphereInter.visible = false;
        scene.add( sphereInter );

const lineGeometry = new THREE.BufferGeometry();
        const points = [];

const point = new THREE.Vector3();
        const direction = new THREE.Vector3();

for ( let i = 0; i < 50; i ++ ) {

direction.x += Math.random() - 0.5;
            direction.y += Math.random() - 0.5;
            direction.z += Math.random() - 0.5;
            direction.normalize().multiplyScalar( 10 );

point.add( direction );
            points.push( point.x, point.y, point.z );

}

lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );

parentTransform = new THREE.Object3D();

for ( let i = 0; i < 5; i ++ ) {

let object;

const lineMaterial = new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } );

if ( Math.random() > 0.5 ) {

object = new THREE.Line( lineGeometry, lineMaterial );

} else {

object = new THREE.LineSegments( lineGeometry, lineMaterial );

}

object.position.x = Math.random() * 100 - 20;
            object.position.y = Math.random() * 100 - 20;
            object.position.z = Math.random() * 100 - 20;

object.rotation.x = Math.random() * 2 * Math.PI;
            object.rotation.y = Math.random() * 2 * Math.PI;
            object.rotation.z = Math.random() * 2 * Math.PI;

object.scale.x = Math.random() + 0.5;
            object.scale.y = Math.random() + 0.5;
            object.scale.z = Math.random() + 0.5;

parentTransform.add( object );

}

scene.add( parentTransform );

raycaster = new THREE.Raycaster();
        raycaster.params.Line.threshold = 3;

renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

document.addEventListener( 'pointermove', onPointerMove );

window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

}

function onPointerMove( event ) {

pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function animate() {
        requestAnimationFrame( animate );
        render();
    }

function render() {

theta += 0.1;

camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
        camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
        camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
        camera.lookAt( scene.position );

camera.updateMatrixWorld();

// find intersections

raycaster.setFromCamera( pointer, camera );

const intersects = raycaster.intersectObjects( parentTransform.children, true );

if ( intersects.length > 0 ) {

sphereInter.visible = true;
            sphereInter.position.copy( intersects[ 0 ].point );

} else {

sphereInter.visible = false;

}

renderer.render( scene, camera );

}

</script>

mouse hover click on line in three.js

three, line

编辑器支持Emmet

快捷键

mouse hover click on line in three.js

three, line

three.js octree 光线投射（raycasting）实现选择交互的代码示例

关于如何用three.js绘制大量粒子并使其可以交互的教程和示例代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：