时间戳

首页 > 解决方案 > 目标对象的轮廓效果

three.js - 目标对象的轮廓效果

问题描述

我正在寻找一种设置对象轮廓的方法。

我使用的是“OutlineEffect”而不是“EffectComposer”（OutlinePass 等），因为当我使用效果器时，即使使用 FXAAShader、SSAA 着色器和 OutlinePass 也无法使用“深色”颜色，分辨率质量也很低。

在 OutlineEffect 上，它说：

/*
 * 1. Traditional
 *
 * var effect = new THREE.OutlineEffect( renderer );
 *
 * function render() {
 *
 *  effect.render( scene, camera );
 *
 * }
*/

当我使用它时，甚至天空盒都会得到轮廓。

var outlinePass;
function init()
{
    ...
    outlinePass = new THREE.OutlineEffect(renderer);
    ...
}

function animate()
{
   ...
   outlinePass.render(scene, camera);
   ...
}

问题是我不想让它在天空盒上画出轮廓。

所以我使用effect.setRenderTarget(objects)了 的底线outlinePass = new THREE.OutlineEffect(renderer);，出现了错误：

three.js:18819 Uncaught TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at Object.get (three.js:18819)
    at WebGLTextures.setupRenderTarget (three.js:22177)
    at WebGLRenderer.setRenderTarget (three.js:25956)
    at THREE.OutlineEffect.setRenderTarget (OutlineEffect.js:563)

我想要做的是，为选择的对象创建“黑色”轮廓，没有天空盒。

谢谢您的帮助！

标签： three.js

解决方案

我创建了 2 个场景，一个用于Don't have outline，另一个用于Have outline。

让我们为没有轮廓对象创建子场景。

skyBox = {
    scene: new THREE.Scene(),
    camera: new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 )
//camera has same properties with main camera.
};

现在，不应该有轮廓的对象应该添加skyBox.scene并skyBox.camera显示它们。

对于对象，我需要添加对象，例如：

skyBox.scene.add(object);

我从主摄像头复制了副摄像头的附加控件（例如轨道控制，...），所以我会觉得只有“1”个摄像头。

所以现在，我需要让副摄像头和主摄像头有相同的条件。

//controls for camera control; e.g. orbit control.

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener('change', camRender2 );  // for controls2
...
controls2 = new THREE.OrbitControls( skyBox.camera, renderer.domElement );
controls2.addEventListener('change', camRender );  // for control
... // other condition for your own controls.

现在，设置完成。我只需要添加OutlineEffect

outlineEffect = new THREE.OutlineEffect(renderer);

而现在，我只需要渲染它。

...
renderer.autoClear = false;   // If miss it, only main camera will render.
...
function render()
{
    //let sub camerafollow the main camera.
    skyBox.camera.quaternion = camera.quaternion;

    outlineEffect.render(scene, camera);           //render for outline scene.
    renderer.render(skyBox.scene, skyBox.camera);  //render for without outline scene.
}

添加大纲对象，您只需要scene.add(object);.

不要忘记！您需要使用相机和场景来控制对象，其中添加、附加了对象。

（例如悬停事件，单击事件，您需要对包含对象的场景进行光线投射。）

推荐阅读