threejs 加载两个场景_threejs - 3 - 场景刷新
:)
简介
刷新其实可以和动画联系起来，改变场景中的物体(改变位置)，刷新界面。最后就可以形成动画。一般1秒钟需要刷新60次
定时器实现动画
可以用js的定时器来做1秒60次的刷新
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
var box = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xffff00,wireframe:true
})
);
box.position.set(0,0,0); // 将立方体放到原点位置
scene.add(box);
camera.position.set(5,5,5);
camera.lookAt(box.position);
document.getElementById("content").appendChild(renderer.domElement);
function run() {
box.position.x += 0.005; //改变立方体的位置
renderer.render(scene,camera);
}
setInterval(run,1.0/60);
可以看到立方体沿着 x 轴移动。但是这个也有些问题，就是不太准确。html5有一个更好的办法来刷新requestAnimationFrame
requestAnimationFrame实现刷新
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
var box = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({
color: 0xffff00,wireframe:true
})
);
box.position.set(0,0,0); // 将立方体放到原点位置
scene.add(box);
camera.position.set(5,5,5);
camera.lookAt(box.position);
document.getElementById("content").appendChild(renderer.domElement);
function run() {
box.position.x += 0.005; //改变立方体的位置
renderer.render(scene,camera);
requestAnimationFrame(run);
}
// setInterval(run,1.0/60);
run();
场景中物体的其他属性
除了可以改变位置，还可以改变旋转角度，和缩放比例
位置是 position
旋转角度是 rotation
缩放是 scale
var step = 0.01;
function run() {
if(box.scale.x > 1.5){
box.scale.x -= step;
}else{
box.scale.x += step;
}
box.rotation.set(
box.rotation.x + step,
box.rotation.y + step,
box.rotation.z
);
box.rotation.z += step;
renderer.render(scene,camera);
requestAnimationFrame(run);
}
threejs - 1 - 介绍&入门
threejs - 2 - 相机
threejs - 3 - 场景刷新
threejs - 4 - 物体
[threejs - 5 - 材质]
[threejs - 6 - 灯光]
[threejs - 7 - 相机进阶]
[threejs - 8 - 物体进阶]
[threejs - 9 - 粒子系统]
[threejs - 10 - 模型加载]
[threejs - 11 - GLSL]
[threejs - 12 - 着色器]
End