在 Three.js 中勾勒出一个 3d 对象 [英] outline a 3d object in three.js

问题描述

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

In many video games, I see a pattern where, when you mouse over an object, it will show a nice gradient highlight around the 2D form of the object. I set up a fairly basic Three.js scene with a sphere in it

首先，我设置了我的 raycaster 变量:

To begin, I set up my raycaster variables:

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

然后我做一个raycaster函数

Then I make a raycaster function

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;
     }
}

这将使我获得他们当前悬停的 OBJECT.现在如何在对象周围实际绘制轮廓?

This will get me the OBJECT they are currently hovering hover. Now how would one actually make an outline around the object?

推荐答案

您需要在编码中使用 OutlinePass.

You need to use OutlinePass in your coding.

在您的 init() 函数中创建大纲传递

Create outlinepass inside your init() function

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

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

And then set the outline selected objects.

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

这篇关于在 Three.js 中勾勒出一个 3d 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！