使用TextureLoader加载图片,如何使他靠近屏幕中心隐藏,并将其放大到显示器?

时间:2017-12-28 07:48:26

标签: three.js tween.js

我在互联网上找到了动画的例子。可以在屏幕中间显示或隐藏一个大星,但我不知道哪个软件是导出的关联JSON文件。

主要代码摘要如下:

//Big Star.json
{
    "normals":[0,1,0,0,0.999969,0],
    "faces":[43,0,1,2,3,0,0,1,2,3,0,0,0,1],
    "materials":[{
        "depthWrite":true,
        "DbgColor":15658734,
        "wireframe":false,
        "opacity":1,
        "depthTest":true,
        "specularCoef":50,
        "colorDiffuse":[1,1,1],
        "colorEmissive":[0,0,0],
        "DbgIndex":0,
        "visible":true,
        "blending":1,
        "transparent":false,
        "shading":"phong",
        "DbgName":"default.029",
        "colorSpecular":[0.5,0.5,0.5],
        "doubleSided":false
    }],
    "metadata":{
        "normals":2,
        "type":"Geometry",
        "vertices":4,
        "generator":"io_three",
        "faces":1,
        "materials":1,
        "uvs":1,
        "version":3
    },
    "uvs":[[0.25,0.0669873,0.625,0.283494,1,0.5,0.5,0.5]],
    "vertices":[0.00888761,-1.50292e-09,0.0126074,0.0356857,-3.49456e-09,0.0293145,0.0399946,0,0,0,0,0]
}


import bigStar from "../../assets/home-animation/Big Star.json";//json file
import star from "../../assets/home-animation/star.png";//image file

//Add to the scene
parseJSON(bigStar, handle_load3);//General function,Processing JSON files
function handle_load3(geometry, material) {
    var color = new THREE.Color(0x6870f5);
    geometry.colors = [color, color, color, color];
    var material = new THREE.PointsMaterial({
        size: 18000,
        opacity: 0.7,
        transparent: true,
        map: new THREE.TextureLoader().load(star),//Processing image files
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        vertexColors: THREE.VertexColors
    });
    mesh3 = new THREE.Points(geometry, material);
    scene.add(mesh3);
}

//Control display or concealment
function clickMe() {

    var scale = mesh3.scale.x < 1 ? 1 : 0.0010000000000000009;
    var duration = scale == 1 ? 2500 : 500;
    new TWEEN.Tween(mesh3.scale)
        .to({ x: scale, y: scale, z: scale }, duration)
        .easing(TWEEN.Easing.Quartic.InOut)
        .onComplete(function() {
            isMeTweening1111 = false;
        }).start();

    var opacity = (mesh3.material.opacity > 0) ? 0 : 0.5;
    new TWEEN.Tween(mesh3.material).to({ opacity: opacity }, 2500).easing(TWEEN.Easing.Quartic.InOut).start();        
}

问题:

  1. 如果我想获取此JSON文件,我应该使用哪种软件进行制作和导出?
  2. 有简单的选择吗?例如,加载PNG格式图片(但你需要一张图片来调整大小,屏幕上的位置,它可以从屏幕中间显示,减少隐藏,显示和隐藏逐渐增加或减少不透明度)。
  3. 感谢您的帮助!

0 个答案:

没有答案