使用 Three.js 的交互式液态金属球

Question

我正在使用 JavaScript 迈出第一步，并且也在使用 Three.js。

今天我在看 Paul Lewis 的教程，用 Three.js 制作一个交互式液态金属球就像这个http://lab.aerotwist.com/webgl/reactive-ball/

我在问我是否可以使用 ThreeBinaryLoader 使用外部模型制作它。我将代码更改为 http://codepen.io/gnazoa/pen/wKVLNG 但它不起作用，因为我这里有语法错误

sphereGeometry = loader.load( 
    "sources/obj/mmlogo/mm_logo.js", 
    function(
      200,      // radius
      60,       // resolution x
      30);      // resolution y

所以我尝试了另一种语法：

var loader = new THREE.BinaryLoader();
            loader.load( "sources/obj/mmlogo/mm_logo.js", function ( sphereGeometry ) {

                var material = new THREE.MeshPhongMaterial( {
                    color: 0x515151,
                    morphTargets: true,
                    overdraw: 0.5,
                    envMap: reflectionCube,
                    combine: THREE.AddOperation,
                    reflectivity: 1,
                    shininess: 0,
                    side: THREE.DoubleSide,
                } );

我仍然遇到同样的语法问题。

我知道这可能很简单，但对我来说一直很困难，因为我正在学习而且这很复杂。

您知道是否可以使用正确的语法来制作它？

Answer 1

试试这个：

var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( sphereGeometry ) {

    var material = new THREE.MeshPhongMaterial( {
        color: 0x515151,
        morphTargets: true,
        overdraw: 0.5,
        envMap: reflectionCube,
        combine: THREE.AddOperation,
        reflectivity: 1,
        shininess: 0,
        side: THREE.DoubleSide
    } );
});

您忘记使用}); 关闭您的函数。我建议使用一些带有语法检查的 IDE。 Javascript 中的运行时错误会给您带来足够的乐趣。 ;)