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 = 1; 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(0xFF0000); // 创建环境光源,不产生阴影 light.position.set(100, 100, 200); scene.add(light); light = new THREE.PointLight(0x00FF00); // 创建点光源 light.position.set(0, 0, 300); scene.add(light); } var mesh; // 创建模型 function initObject() { var geometry = new THREE.CylinderGeometry(100, 150, 400); // THREE.CylinderGeometry构造圆柱体 var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); //THREE.MeshLambertMaterial高级材质,构造类似木头、石头等不光滑的表面 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() { mesh.position.x += 1; // mesh就是指的物体,它有一个位置属性position,这个position是一个THREE.Vector3类型变量,所以你要把它向左移动,只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。 renderer.render(scene, camera); requestAnimationFrame(animation); } </script> </body> </html>
移动物体与移动摄像机的唯一区别是
mesh.position.x += 1;
附带three.js代码,点击下载
相关文章
- js省市二级联动
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)绚丽的3D星空动画
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(Laydate.js)简单实现日期日历
- JS本地存储信息的实现方式(localStorage 与 userData)
- three.js之让物体动起来方式(一)移动摄像机
- js 生成二维码图片
- js-ECMAScript-1:基础语法:打印,引入方式,变量
- JS遍历对象的方式
- js引用cdn,如果cdn挂了,用本地js替补
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- Atitit.跨语言反射api 兼容性提升与增强 java c#。Net php js
- 华为OD机试 - 匿名信(Java & JS & Python)
- three.js(JS 三维模型库)介绍和入门
- js循环修改数组属性key值
- JS将科学计数法转换成数据值的方式
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)