Movimento de objeto
Em three.js, existem duas maneiras de fazer um objeto estacionário mostrar um efeito de movimento:
- Deixe a geometria do objeto se mover
- Deixe a câmera se mover
Código de teste: deixe o cilindro se mover e a câmera realmente se moverá.
Cilindros podem usar EdgesGeometry para desenhar linhas de fronteira
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
<script src="js/three.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
camera = new THREE.PerspectiveCamera(105,
window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器
render = new THREE.WebGLRenderer({
antialias: true
});
// 计算处理dpi
render.setPixelRatio(window.devicePixelRatio);
// 设置画布大小
render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");
// 绘制出一个canvas小面板
app.appendChild(render.domElement);
// 创造一个立方体, 点模型
var geometry = new THREE.CylinderGeometry(10, 10, 20, 15); //创建一个立方体几何对象Geometry
// 创造一个立方体, 网格模型
var material3 = new THREE.MeshBasicMaterial({
color: 0xffff00,
});
var meshs = new THREE.Mesh(geometry, material3);
// 创建物体的边框线
var geoEdges = new THREE.EdgesGeometry(geometry, 1);
var edgesMtl = new THREE.LineBasicMaterial({color: 0xff0000});
var geoLine = new THREE.LineSegments(geoEdges, edgesMtl);
meshs.add(geoLine);
scene.add(meshs);
//执行渲染操作 指定场景、相机作为参数
camera.position.z = 40;
camera.position.y = 20;
camera.position.x = 0;
render.render(scene, camera);
// 产生动效
function animate(){
// 1.照相机移动
camera.position.y -= 0.05;
if(camera.position.y < -10) {
camera.position.z += 0.05;
}
render.render(scene, camera);
}
setInterval(animate,10);
</script>
</body>
</html>
Efeito:
se o objeto deve se mover, apenas modifique ligeiramente a função de movimento
// 产生动效
function animate(){
// if(camera.position.y >= -1000){
// // 1.照相机移动
// camera.position.y -= 0.3;
// if(camera.position.y < -10) {
// camera.position.z += 0.3;
// }
// }
//2.物体移动
meshs.position.y += 0.3;
if(meshs.position.y > 10) {
meshs.position.z -= 0.3;
}
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
atuação
Na vida real, muitas vezes você pode ver os efeitos de animação desenhados e alguns efeitos de animação parecem muito suaves, e alguns estão muito atrasados. Eles estão intimamente relacionados ao desempenho do programa após o exercício.
Em relação ao desempenho: teste um programa para ver se há um gargalo no desempenho. No mundo 3D, o conceito de número de quadros é frequentemente usado. Primeiro, vamos definir o significado do número de quadros.
Número de quadros: o processador gráfico pode atualizar várias vezes por segundo, geralmente expresso em fps (quadros por segundo)
Movimento do objeto no olho humano:
quando o objeto está se movendo rapidamente, quando a imagem vista pelo olho humano desaparece, o olho humano pode continuar a reter a imagem da imagem por cerca de 1/24 de segundo. Esse fenômeno é chamado de persistência da visão . É uma propriedade do olho humano. Quando o olho humano vê um objeto, ele é visualizado na retina e introduzido no cérebro humano pelo nervo óptico para sentir a imagem do objeto. Quadro após quadro de imagens entram no cérebro humano, e o cérebro humano conecta essas imagens para formar uma animação.
Em three.js, para que possamos ver melhor esses dados, podemos usar o monitor de desempenho Stats para detectar e gerenciar o movimento.
Estatísticas do Monitor de Desempenho
Sobre a introdução oficial do Stats: https://github.com/mrdoob/stats.js
também pode ser encontrado na pasta após o download do Three.js, o download do GitHub pode ser um pouco lento, eu baixei do gitee. Forneça alguns links:
endereço de
download three.js 01 endereço de download three.js 02 endereço
GitHub
Lembre - se de importar o arquivo de estatísticas ao usá-
lo.Geralmente , o efeito do uso é o seguinte: 1. Função SetMode
Quando o parâmetro é 0, significa que a interface FPS é exibida, e quando o parâmetro é 1, significa que a interface MS é exibida.
2 、 estatísticas 的 domElement
O domElement de estatísticas representa o destino do desenho (DOM) e o gráfico da forma de onda é desenhado nele.
3. A função inicial das estatísticas
begin, chame a função begin antes do código que deseja testar e chame a função end () depois que seu código for executado, para que você possa contar o número médio de quadros executados por esse código.
Como usar: basta inserir no código
-
novo um objeto de estatísticas, código: stats = new Stats ();
-
Adicione este objeto à página html
-
Chame a função stats.update () para contar o tempo e o número de quadros
// 性能监视器
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// 将stats的界面对应左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '30px';
stats.domElement.style.top = '0px';
app.appendChild( stats.domElement );
// 在运动函数中写入stats.update();
function animate(){
if(camera.position.y >= -1000){
// 1.照相机移动
camera.position.y -= 0.3;
if(camera.position.y < -10) {
camera.position.z += 0.3;
}
}
render.render(scene, camera);
window.requestAnimationFrame(animate);
stats.update();
}
