Используйте 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();
}
Вопросы:
- Если я хочу получить этот файл JSON, какое программное обеспечение мне следует использовать для создания и экспорта?
- Есть ли простая альтернатива? Например, загрузка изображения в формате PNG (но вам нужно изображение, чтобы отрегулировать размер, положение на экране, и оно может отображаться из середины экрана, уменьшая скрытое, отображая и скрывая, постепенно увеличивая или уменьшая непрозрачность).
Спасибо за вашу помощь!