具有Three.js的交互式液体球体

时间:2015-12-01 16:14:29

标签: javascript three.js

我正在使用JavaScript编写第一步并使用Three.js进行编码。

我正在探索,我发现了一个令人惊奇的保罗·刘易斯教程,以制作一个互动的液体球体。这是我制作的代码集http://codepen.io/gnazoa/pen/ZQzEqX

我正在尝试将代码更改为使用二进制加载程序加载的外部模型的动画。我有以下代码,但它不起作用http://codepen.io/gnazoa/pen/MKgWxE

Google Chrome JavaScript控制台告知此功能存在语法错误

function createObjects() {
    var numberOfImages = 46,
        images = [];

    for (var i = 1; i <= numberOfImages; i++) {
        images.push('sources/instagram2/image' + i + ".jpg");
    }

    var urls = images.sort(function () {
        return .6 - Math.random()
    }).slice(0, 6);

    textureCube = THREE.ImageUtils.loadTextureCube(urls);
    var loader = new THREE.BinaryLoader();
    loader.load("https://raw.githubusercontent.com/mrdoob/three.js/master/examples/obj/walt/WaltHead_bin.js", function ( Geometry ) {
        var Material = new THREE.MeshLambertMaterial({
            color: 0xEEEEEE,
            envMap: textureCube,
            shininess: 200,
            shading: THREE.SmoothShading,
        });

        sphere = new THREE.Mesh(Geometry, Material);
        sphere.geometry.dynamic = true;
        sphere.position.y = 0;
        scene.add(sphere);
    });

    lightFront = new THREE.PointLight(0xFFFFFF, 1.5);
    lightFront.position.y = 400;
    scene.add(lightFront);

    // and another from the bottom
    lightBottom = new THREE.DirectionalLight(0xFFFFFF, 1.3);
    lightBottom.position.y = -240;
    scene.add(lightBottom);
}

我有一周的时间观看教程和阅读书籍来解决这个问题,我不能这样做。我知道对于一个经验丰富的人来说,这可能是非常容易的,所以如果你能给我一个结论,那就太棒了。

非常感谢

0 个答案:

没有答案