Используйте TextureLoader для загрузки изображения, как сделать так, чтобы он был ближе к центру экрана, чтобы скрыть его, и увеличить его до дисплея?

Я нашел пример анимации в интернете. Большую звезду можно показать или скрыть в середине экрана, но я не знаю, какое программное обеспечение экспортируется в связанный файл 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 (но вам нужно изображение, чтобы отрегулировать размер, положение на экране, и оно может отображаться из середины экрана, уменьшая скрытое, отображая и скрывая, постепенно увеличивая или уменьшая непрозрачность).

Спасибо за вашу помощь!

0 ответов

Другие вопросы по тегам