threejs 加载两个场景_threejs - 3 - 场景刷新

刺骨的言语ヽ痛彻心扉 2023-01-01 06:00 296阅读 0赞

简介

刷新其实可以和动画联系起来，改变场景中的物体(改变位置)，刷新界面。最后就可以形成动画。一般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

threejs 加载两个场景_threejs - 3 - 场景刷新

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 threejs：遍历场景中的内容。

相关 ThreeJS环境搭建

相关 threejs 加载两个场景_threejs - 3 - 场景刷新

相关 java3d载入obj_Threejs大型obj文件的秒加载实现

相关 Unity5.3加载场景

相关 threejs---相机沿着自定义轨道移动，实现场景漫游效果

相关 threejs--BufferGeometry创建线条

相关 threejs：模型轻量化

相关 unity 3d 异步加载场景--异步预加载场景

相关使用js截图 threeJS加载出的模型