javascript - outline a 3d object in three.js - Stack Overflow

admin管理员组

文章数量:1201814

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

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

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

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

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

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

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

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

• javascript
• three.js

Share Improve this question Follow edited Oct 13, 2014 at 22:06 user128511 asked Oct 13, 2014 at 13:38 corvidcorvid 11.2k1212 gold badges7070 silver badges134134 bronze badges 3

• 1 Take a look at this example: stemkoski.github.io/Three.js/Outline.html – gaitat Commented Oct 13, 2014 at 13:43
• 3 See stackoverflow.com/questions/17739760/… – WestLangley Commented Oct 13, 2014 at 13:54
• Wow some nice examples you got there... – Wilt Commented Oct 14, 2014 at 8:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22

You need to use OutlinePass in your coding.

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

Take a look at this example: https://threejs.org/examples/?q=out#webgl_postprocessing_outline

本文标签： javascriptoutline a 3d object in threejsStack Overflow