Question

我是THREE.js的新手，我正在研究如何为网格添加发光效果以显示它已被选中。

我在GitHub上找到了第三部分库; https://github.com/jeromeetienne/threex.geometricglow

和这里的工作示例;

http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html

似乎应该很容易使用以下几行;

     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>

Answer 1

似乎这是THREEx.dilateGeometry类中的一个问题我在尝试将光晕应用到一个简单的球体时遇到了错误，我确实设法通过在THREEx.dilateGeometry类中检查'undefined'来绕过它。
你可以看到它与我在这个小提琴http://jsfiddle.net/nojL808c/中的简单改动一起工作。第25行是我添加的未定义检查。

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

虽然这适用于球体，但除非添加顶点法线，否则它不适用于您的自定义几何体。除了您的自定义几何体而不是球体之外，这里是相同的。 http://jsfiddle.net/nojL808c/1/

如果我没记错的话，你这样做是为了突出显示一个选定的对象。如果是这样，我认为有更好的方法。也许就像在这里的示例中所做的那样：http://mrdoob.github.io/three.js/examples/webgl_interactive_buffergeometry.html或者像这个小提琴一样http://jsfiddle.net/Tcb3z/

Answer 2

您的顶点法线可能尚未计算。尝试使用yourGeometry.computeVertexNormals();

threex.geometricglow可以使用自定义几何体吗？

2 个答案: