如何在THREE.js中将等距相机指向立方体的中心
How to point isometric camera to the center of cube in THREE.js?
我正在努力解决一个练习问题,也许你可以帮助我。我得设置一个摄像头,用THREE.js来处理。立方体应该保持它的初始比例,相机应该看着立方体的中心。我想我成功地做了一个等距投影,但我不知道如何把相机对准中心。
这是我尝试过的:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Cube</title>
<style>
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-3,3,3,-3, 0, 100);
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var light = new THREE.PointLight( 0xffffff );
light.position.set(-10, 10, 10);
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800,800);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
var cube = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial( { color: 0x00ffff }));
scene.add( cube );
function render() { //this is to be used for animation later
requestAnimationFrame(render);
camera.position.x=1;
camera.position.y=1;
camera.position.z=1;
camera.lookAt(new THREE.Vector3(0,0,0));
renderer.render( scene, camera);
}
render();
</script>
这就是lookAt的作用。在你的例子中,立方体的位置等于它的中心,所以答案是:
camera.lookAt( cube.position );
相关文章:
- 如何使相机跟随地形's在此示例中的高度:http://threejs.org/examples/#webgl_t
- 单击以将相机放置在Three js中的对象附近
- html画布中的等轴测立方体投影
- 将相机添加到Three.js中的场景的原因
- 如何在three.js中实现不同相机/场景之间的交叉渐变
- cordova.js/Camera.js无法使用相机功能
- HTML5相机缓冲和延迟(延迟镜像)
- Phonegap相机在画布上的绘制失真
- 三.js - 自 r69 以来如何链接/添加相机灯
- 钛:从Android的相机/图库图像本地保存文件
- 使用镶边立方体浏览器
- 投影仪和带有正交相机的射线
- 三.js - 如何获取相机相对于原点的位置
- 控制立方体或其他几何体的每个面,分为三.js
- 为什么我不能在 Django Web 应用程序中使用客户端相机拍摄图像快照
- 从移动相机拍摄图像并在上传前预览
- SVG相机平移每次都保持重置为0
- 如何旋转相机,使其面向/高于球体上的点(Three.js)
- 三js立方体相机没有像我预期的那样反射
- 如何在THREE.js中将等距相机指向立方体的中心