在three.js中勾勒出一个三维对象的轮廓

outline a 3d object in three.js

本文关键字：一个 三维 对象 轮廓 js three      更新时间：2023-09-26

在许多视频游戏中，我看到一种模式，当你将鼠标悬停在对象上时，它会在对象的2D形式周围显示一个很好的渐变高亮。我设置了一个相当基本的Three.js场景，其中有一个球体

首先，我设置了我的光线投射器变量：

var projector = new THREE.Projector();
var mouse2D = new THREE.Vector2(0, 0);
var mouse3D = new THREE.Vector3(0, 0, 0);

然后我做了一个光线投射功能

document.body.onmousemove = function highlightObject(event) {
    mouse3D.x = mouse2D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;
    projector.unprojectVector(mouse3D, camera);
    var raycaster = new THREE.Raycaster(camera.position, mouse3D.sub(camera.position).normalize());
    var intersects = raycaster.intersectObject(mesh);
     if (intersects.length > 0) {
         var obj = intersects[0].object; //the object that was intersected
         rotate = false;
     } else {
         rotate = true;
     }
}

这将使我获得他们当前悬停的对象悬停。现在，如何在物体周围绘制轮廓呢？

您需要在编码中使用OutlinePass。

在init()函数中创建outlinepass

outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass( outlinePass );

然后设置选定对象的轮廓。

if (intersects.length > 0) {
    var obj = intersects[0].object; // the object that was intersected
    rotate = false;
    outlinePass.selectedObjects = obj;
} else {
    rotate = true;
}

看看这个例子：https://threejs.org/examples/?q=out#webgl_postprocessing_outline

相关文章：