Question

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

将边缘应用于整个模型几何体
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();

}

任何帮助都将不胜感激。

Answer 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模型上看到大纲。我在我的一个项目中使用它。

如何在three.js中导入Collada模型上使用EdgesHelper

1 个答案: