Three.js outlinePass没有出现

时间:2019-05-22 13:21:00

标签: javascript three.js

我使用变换对象控件来移动场景中的对象。 我想用outlinePass突出显示所选对象,但它不会出现... 但是创建一个js小提琴就可以了!!但是在我的项目中没有...有人知道可能的原因吗?

js小提琴:https://jsfiddle.net/7z1sLygu/1/

var camera, scene, renderer;
var geometry, material, group, control;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

var composer;
var outlinePass;
var effectFXAA;


init();
render();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

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

    mesh = new THREE.Mesh( geometry, material );
    mesh1 = new THREE.Mesh( geometry, material );
    mesh1.position.set(0.3, 0, 0);

    group = new THREE.Group();
    group.add( mesh, mesh1 );
    scene.add( group );

    control = new THREE.TransformControls( camera, renderer.domElement );
    scene.add( control );
    control.addEventListener( 'change', render );

    renderer.domElement.addEventListener( 'mousedown', clickEvent );




    composer = new THREE.EffectComposer( renderer );

    var renderPass = new THREE.RenderPass( scene, camera );
    composer.addPass( renderPass );

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



    outlinePass.selectedObjects = [mesh1];
}

function render() {
  renderer.render( scene, camera );
  composer.render();
}


function clickEvent( e ) {

  mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );

  var intersects = raycaster.intersectObject( group, true );

  if ( intersects.length > 0 ) {

    let object = intersects[0].object;

    if ( control.object === undefined || control.object !== object ) {
        control.attach( object );
      outlinePass.selectedObjects = [object];
      render();
    }

  }

}

对不起,英语不好:D

0 个答案:

没有答案