如何在导入的 Collada 模型上使用 EdgesHelper 在三个.js.

How to use EdgesHelper on imported Collada model in three.js

本文关键字：EdgesHelper js 三个 导入 Collada 模型      更新时间：2023-09-26

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

  • 将边应用于整个模型几何体，
  • 科拉达模型之间的未对齐和比例差异和生成的边。

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

任何帮助将不胜感激。

遍历场景对象并在加载器回调中使用 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 模型上看到轮廓。我在我的一个项目中使用它。

相关文章：