Javascript threex.geometricglow可以与自定义几何图形一起使用吗？_Javascript_Three.js

Javascript threex.geometricglow可以与自定义几何图形一起使用吗？

javascript three.js

Javascript threex.geometricglow可以与自定义几何图形一起使用吗？,javascript,three.js,Javascript,Three.js,我是THREE.js的新手，我正在研究向网格添加光晕效果以显示它已被选中的方法我在GitHub上找到了一个第三方库；这是一个有效的例子似乎通过以下几行代码很容易实现这一点： var mesh = new THREE.Mesh(geometry, materials[Math.floor(Math.random() * materials.length)]); var glowMesh = new THREEx.GeometricGlowMesh(mesh);

我是THREE.js的新手，我正在研究向网格添加光晕效果以显示它已被选中的方法

我在GitHub上找到了一个第三方库；

这是一个有效的例子

似乎通过以下几行代码很容易实现这一点：

     var mesh = new THREE.Mesh(geometry, materials[Math.floor(Math.random() * materials.length)]);
     var glowMesh   = new THREEx.GeometricGlowMesh(mesh);
     mesh.add(glowMesh.object3d);

但是当我尝试使用自定义几何体时，与演示中不同，我得到了错误

Uncaught type error: Cannot read property 'x' of undefined

这来自从属脚本threex.dialategeometry.js

有人知道我想做的是可能的，还是有更好的方法来实现我想要的发光效果

没有库代码的完整代码示例

<html>
<head>
<title>Glow example</title>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 <script src="scripts/three.min.js"></script>
  <script src="scripts/threex.atmospherematerial.js"></script>
  <script src="scripts/threex.dialategeometry.js"></script>
  <script src="scripts/threex.geometricglow.js"></script>
<script>
  initialise = function() {
    var width = $(window).innerWidth();
    var height = $(window).innerHeight()-10;

    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( width, height);

    var cameraDistance = document.cameraDistance = 65;
    var camera = document.camera = new THREE.PerspectiveCamera( cameraDistance, width / height, 1, 200);
    camera.position.x = 0;
    camera.position.y =0;
    camera.position.z = -60;

    var scene = new THREE.Scene();

    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-20,-20,0));
    geometry.vertices.push(new THREE.Vector3(-40,0,0));
    geometry.vertices.push(new THREE.Vector3(-20,20,0));
    geometry.vertices.push(new THREE.Vector3(20,20,0));
    geometry.vertices.push(new THREE.Vector3(40,0,0));
    geometry.vertices.push(new THREE.Vector3(20,-20,0));

    geometry.faces.push(new THREE.Face3(0,1,2));
    geometry.faces.push(new THREE.Face3(0,2,3));
    geometry.faces.push(new THREE.Face3(0,3,4));
    geometry.faces.push(new THREE.Face3(0,4,5));

    var material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide, color: 0xff0000})

    mesh = new THREE.Mesh(geometry,material);
    mesh.doubleSided = true; 

    var glowMesh= new THREEx.GeometricGlowMesh(mesh);
    mesh.add(glowMesh.object3d);

    scene.add(mesh); 

    var tick = function(){
        camera.lookAt( scene.position );
        renderer.render( scene, camera );
        requestAnimationFrame(tick);
    }

    $("#container").append(renderer.domElement);
    requestAnimationFrame(tick);
  }

</script>

</head>

<body onload=initialise()>
   <div id="container"/>
</body>

</html>

这似乎是3X几何课上的一个问题。我在尝试将光晕应用于简单球体时遇到错误，我确实通过在THREEx.Geometry类中检查“undefined”来绕过它。你可以在这把小提琴上看到我对它的简单改动。第25行是我添加的未定义的检查

        if(typeof vertexNormal != 'undefined'){
            vertex.x    += vertexNormal.x * length;
            vertex.y    += vertexNormal.y * length;
            vertex.z    += vertexNormal.z * length;
        }

尽管这适用于球体，但除非添加顶点法线，否则它将不适用于自定义几何体。除了使用自定义几何体而不是球体外，其他情况与此相同

如果我没记错，您这样做是为了高亮显示选定对象。如果是这样，我认为有更好的方法。可能像在这里的例子中那样：或者像在这把小提琴中一样，你的顶点法线可能没有被计算出来。尝试使用您的Geometry.computeVertexNormals

如果不看到更多代码，就很难调试代码。@2pha谢谢，请查看我添加的完整代码示例。你应该可以通过搜索google获得库代码。谢谢2pha，我可能错了，但我认为你给出的第一个备选示例可能也需要顶点法线，我试图引入代码，我认为它突出显示了三角形，但它不起作用，但我确实认为这是一种方法，我只需要再仔细阅读一下就可以了，我尝试通过调用几何体对象上的computeVertexNormals来添加顶点法线，但仍然没有结果。我不确定这至少在理论上是否足够？