如何在三个.js 中对导入的 Collada 模型使用 EdgesHelper答案

【问题标题】：How to use EdgesHelper on imported Collada model in three.js如何在三个.js 中对导入的 Collada 模型使用 EdgesHelper
【发布时间】：2015-04-20 01:58:05
【问题描述】：

我正在尝试在 three.js 中加载的 Collada 模型上使用 EdgesHelper，但遇到以下问题：

将边缘应用于整个模型几何体，
Collada 模型之间的错位和比例差异并生成边缘。

http://codepen.io/znak/pen/raqBLM?editors=001

var controls, scene, camera, renderer;
var light;
var dae, daeGeometry, daeMaterial, daeMesh, daeEdges;

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'http://www.lenart.pl/assets/codepen/FestoolClamp2.dae', function ( collada ) {

    dae = collada.scene;
    daeMaterial = new THREE.MeshBasicMaterial( { color: 0xaaaaaa } );

    collada.scene.traverse( function ( child ) {

        if ( child.material ) child.material = daeMaterial;

        if ( child.geometry ) {
            daeMesh = new THREE.Mesh( child.geometry, daeMaterial );
            daeEdges = new THREE.EdgesHelper( daeMesh, 0x444444 );
        }

    } );

    dae.updateMatrix();

    init();
    render();

} );

function init() {

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 150, -350 );

    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );

    light = new THREE.DirectionalLight( 0xffffff, .75 );
    light.position.set( 0, 1, -2 );
    scene.add( light );

    dae.add( daeEdges );
    scene.add( dae );
    dae.scale.x = dae.scale.y = dae.scale.z = 10;

    renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );

    animate();

}

function animate() {

    requestAnimationFrame( animate );

    dae.rotation.y += 0.002;

    controls.update();
    render();

}

function render() {

    renderer.render( scene, camera );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

    render();

}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

在加载器回调中使用 EdgesHelper 遍历场景对象并添加边：

object3D.traverse(function(o){ if (o.type === "Mesh") {

    var m = new THREE.EdgesHelper(o, 0x0);
    m.matrixAutoUpdate = true;
    m.matrix = o.matrix;
    o.add(m);
} });

您应该会看到导入的 dae 模型的轮廓。我在我的一个项目中使用它。

【讨论】：