camera中lookAt的理解
camera为相机看的目标点:因为屏幕显示的是相机视椎体的可视范围,而相机的lookAt方法指的是相机观察的目标点,故可以得出:
相机lookAt的点一定显示在屏幕的正中央:利用这点,我们可以实现物体移动时,我们可以一直跟踪物体,让物体永远在屏幕的中央:一下是代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shape对象的研究</title>
<style>
body{
margin:0;
}
</style>
</head>
<script src="../js/three.js"></script>
<script>
function init() {
createScene();
buildAuxSystem();
addBox();
loop();
}
var scene,camera,renderer,width = window.innerWidth,height = window.innerHeight,controls;
var box,x =0 ,z = 0;
function createScene() {
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.set(200,200,200);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x333333),1);
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
document.addEventListener("keydown",handleKey,false);
window.addEventListener("resize",handleWindowResize,false)
}
function loop() {
renderer.render(scene,camera);
box.position.set(x,5,z);
camera.lookAt(box.position);
requestAnimationFrame(loop);
}
function handleWindowResize() {
width = window.innerWidth;
height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
}
// 建立辅助设备系统
function buildAuxSystem(){
var gridHelper = new THREE.GridHelper(320,32);
scene.add(gridHelper);
var axesHelper = new THREE.AxesHelper(320);
scene.add(axesHelper);
}
function addBox() {
var geometry = new THREE.CubeGeometry(10,10,10);
box = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({color:0x00ff00}));
box.position.set(x,5,z);
scene.add(box);
}
function handleKey(e) {
if(e.keyCode == 38){
z -= 10;
}else if(e.keyCode == 39){
x += 10;
}else{
return;
}
}
</script>
<body onload ="init()">
</body>
</html>
效果: 当我们按 上 键 物体向上移动 屏幕视角也在移动, 当我们按 右键 物体向右移动, 屏幕也跟着向右移动。这样物体一直在屏幕的中央。
camera中lookAt的理解相关推荐
- camera中LENS和SENSOR的CRA是如何搭配的?
camera中LENS和SENSOR的CRA是如何搭配的? camera中,lens和sensor的搭配是非常关键的问题.但这两者是如何搭配的呢? 一般在Sensor data sheet中会附有全视 ...
- javascript中 (function(){})();如何理解?
javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...
- java抽象的理解_Java中抽象类的理解
Java中抽象类的理解 创建 所有 bsp 抽象类 member 初始 dem print ---------------------------------------- ...
- Java中 多态的理解
** Java中 多态的理解 ** 多态官方定义为: 所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指 ...
- 【转载】谈谈我对Java中CallBack的理解
谈谈我对Java中CallBack的理解 转载自: http://www.cnblogs.com/codingmyworld/archive/2011/07/22/2113514.html CallB ...
- C++中关键字的理解--Static
C++中关键字的理解---Static 目录:1.static缘起 2.static自我理解 3.static举例使用 4 ...
- 交互搜索中的自然语言理解技术
交互搜索 交互搜索是一种新的产品形态,可以和用户对话,记住用户的购物需求和偏好,提供购物知识和建议.在搜索页面下拉就可以进入了,类似于微信的小程序的进入方式. 自然语言理解 对话和搜索的最大区别就是对 ...
- php钩子是啥意思,php中的钩子理解及应用实例分析
本文实例讲述了php中的钩子理解及应用.分享给大家供大家参考,具体如下: 钩子的解释 钩子定义 钩子是编程里一个常见概念,非常的重要.它使得系统变得非常容易拓展,(而不用理解其内部的实现机理,这样可以 ...
- java 打开jsp文件_jsp文件怎么打开(java-web中jsp的理解)
jsp文件怎么打开(java-web中jsp的理解)JSP:Java Server Pages.JSP是一种网页的编码格式,不同于HTML的是JSP中是由 HTML中的标签指令 和 Java逻辑代码 ...
最新文章
- 谈谈《潜伏在办公室》对管理层的影响
- 收官礼 |《神策 2018 数据驱动大会回顾专刊》发布,你要的干货,已打包!
- 网站上flv,MP4等格式的视频文件播放不出来的解决办法
- ROS(3)订阅者subscriber编程实现
- 算法提高 邮票面值设计 搜索 动态规划
- 【转】重装Ubuntu时如何保留/home分区中的数据
- Mac上emacs标记快捷键
- abp调用登录接口获取token再调用其他接口
- windows2012计算机在桌面显示,Windows2012 如何在桌面上显示”我的电脑”
- Sisvel和RPX签署Wi-Fi标准必要专利许可协议
- 计算机论文中期考核报告,计算机与人工智能学院硕士研究生中期考核办法
- YAH2460型圆振动筛设计
- ansible meta目录
- html dd标签隐藏,HTML dl dt dd 标签
- 关于hadoop安装中nodemanager启动失败的原因
- 10% building 2/5 modules 3 active ...lib\index.js!/路径报错
- com.alibaba.fastjson.JSONException: create instanc
- 静电容键盘和机械键盘声音对比
- 自动写代码?别闹了!
- CSS中margin属性详解