three.js之让物体动起来方式(一)移动摄像机
JS 方式 移动 起来 物体 摄像机 Three
2023-09-14 08:57:47 时间
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="../static/three.js-master/build/three.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; height: 600px; background-color: #EEEEEE; } </style> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> <script> var renderer; // 渲染器 function initThree() { renderer = new THREE.WebGLRenderer(); // 创建渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 设置长度和宽度 document.getElementById('canvas-frame').appendChild(renderer.domElement); // 添加到canvas-frame renderer.setClearColor(0xFFFFFF, 1.0); // 设置背景色和透明度 } var camera; // 摄像机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); // 创建摄像机 camera.position.x = 0; // 摄像机坐标 camera.position.y = 0; camera.position.z = 1000; camera.up.x = 0; camera.up.y = 0; camera.up.z = 0; camera.lookAt(0, 0, 0); } var scene; // 场景 function initScene() { scene = new THREE.Scene(); // 创建场景 } var light; // 光 function initLight() { light = new THREE.AmbientLight(0xFFFFFF); // 创建环境光源,不产生阴影 light.position.set(100, 100, 200); scene.add(light); light = new THREE.PointLight(0x00FF00); // 创建点光源,可以产生阴影 light.position.set(0, 0,300); scene.add(light); } function initObject() { var geometry = new THREE.CylinderGeometry( 100,150,400); // THREE.CylinderGeometry构造圆柱体 var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} ); //THREE.MeshLambertMaterial高级材质,构造类似木头、石头等不光滑的表面 var mesh = new THREE.Mesh( geometry,material); // 网状 Mesh的构造函数是这样的:Mesh( geometry, material ) geometry是它的形状,material是它的材质 mesh.position = new THREE.Vector3(0,0,0); scene.add(mesh); } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); animation(); } function animation() { //renderer.clear(); camera.position.x =camera.position.x +1; // 关键地方 没调一次animation()方法,x就自加1,就会让摄像机的位置改变,这样看到的物体就动了 renderer.render(scene, camera); // 渲染 requestAnimationFrame(animation); // 循环调用animation()方法 } </script> </body> </html>
物体运动还有一个关键点,就是要渲染物体运动的每一个过程,让它显示给观众。渲染的时候,我们调用的是渲染器的render() 函数。代码如下:
renderer.render( scene, camera );
如果我们改变了物体的位置或者颜色之类的属性,就必须重新调用render()函数,才能够将新的场景绘制到浏览器中去。不然浏览器是不会自动刷新场景的。
如果不断的改变物体的颜色,那么就需要不断的绘制新的场景,所以我们最好的方式,是让画面执行一个循环,不断的调用render来重绘,这个循环就是渲染循环,在游戏中,也叫游戏循环。
为了实现循环,我们需要javascript的一个特殊函数,这个函数是requestAnimationFrame。
调用requestAnimationFrame函数,传递一个callback参数,则在下一个动画帧时,会调用callback这个函数。
function animation() { //renderer.clear(); camera.position.x =camera.position.x +1; // 关键地方 没调一次animation()方法,x就自加1,就会让摄像机的位置改变,这样看到的物体就动了 renderer.render(scene, camera); // 渲染 requestAnimationFrame(animation); // 循环调用animation()方法 }
也就是不断的执行render()函数。在render()函数中不断的改变物体或者摄像机的位置,并渲染它们,就能够实现动画了。
附带three.js代码,点击下载
摄像机不断右移,所以物体相对不断左移。
相关文章
- JS框架_(JQuery.js)文章全屏动画切换
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(Vue.js)带有星期日期的数字时钟
- 【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式
- js中settimeout和setinterval的区别是什么?
- js创建对象的几种方式
- JS中字符串的true转化为boolean类型的true
- js 基于函数伪造的方式实现继承
- JS魔法堂:doctype我们应该了解的基础知识
- js逆向的题目,15-20
- [Javascript] Manage Application State with Immutable.js
- js实现继承的5种方式
- jquery瀑布流布局(masonry.js)
- [Functional Programming] Functional JS - Pointfree Logic Functions
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- 说说backbone.js
- Atitit. html 使用js显示本地图片的设计方案.doc
- 华为OD机试 - 最大利润(Java & JS & Python)
- 学会这5种JS函数继承方式,前端面试你至少成功50%
- 一统江湖的大前端(8)- velocity.js 运动的姿势(上)
- js实现python的random.choice
- JS实现99乘法表
- js和jquery获取textarea输入的内容
- JS判断单、多张图片加载完成
- JS 日期对象常用函数(时间常用函数、日期格式化)
- Web前端 | HTML嵌入JS代码的三种方式