首页 » 技术分享 » three.js（一）控制摄像机角度

three.js（一）控制摄像机角度

　
评论关闭　2,098次浏览

这篇应该算是最基础的了，不过因为我自己也是刚刚学习这个，所以也是把这个单独拿出来做一篇分享，因为3d就是想要人能够控制多角度观察的。

话不多说，这里就把显示物品单独拎出来看看，这也是官网的例子

初始显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

renderer:渲染器包括webgl和canvas，canvas是2d渲染的回退。通过渲染器把摄像机视口渲染到我们的网页中;
camera：摄像机包括透视摄像机（正交摄像机，立方体摄像机）；屏幕中心为世界三维坐标系原点，屏幕向外为Z，屏幕右方为X，屏幕上方为Y
scence ：存放所有3d场景中的对象，可通过scence.children快速拿到所有场景对象的信息（基于对象命名的索引，So命名规范极其重要）；

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

render();
//初始化显示
function render() {
   renderer.render(scene, camera);
}
效果

这里也可以看到一点都没有3d的味道
在这里插入图片描述

旋转摄像机（我自己取得名字）

我也不知道这个具体叫什么，我就是看他可以类似摄像机多角度观察

<script src="./examples/js/controls/OrbitControls.js"></script>


var orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.update();
orbit.addEventListener('change', render);
效果

在这里插入图片描述

这里大家应该有一点3d的样子了吧，不过这个盒子线条不明显我也暂时也不知道怎么弄，等我再看看three.js的文档吧

转载自原文链接, 如需删除请联系管理员。

原文链接：three.js（一）控制摄像机角度，转载请注明来源！

赞 5