我在互联网上找到了动画的例子。可以在屏幕中间显示或隐藏一个大星,但我不知道哪个软件是导出的关联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();
}
问题:
感谢您的帮助!