必威体育Betway必威体育官网
当前位置:首页 > IT技术

camera中lookAt的理解

时间:2019-08-31 07:10:00来源:IT技术作者:seo实验室小编阅读:71次「手机版」
 

look at

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>

效果:  当我们按  上 键 物体向上移动 屏幕视角也在移动,  当我们按  右键 物体向右移动, 屏幕也跟着向右移动。这样物体一直在屏幕的中央。

相关阅读

Unity3D 的LookAt() 与 LookRotation()方法的比较

LookAt(),定义: 其定义在UnityEngine.Transform类中,public void LookAt(Vector3 worldPosition);public void LookAt(Transform ta

分享到:

栏目导航

推荐阅读

热门阅读