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

three.js(一)控制摄像机角度

 

这篇应该算是最基础的了,不过因为我自己也是刚刚学习这个,所以也是把这个单独拿出来做一篇分享,因为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:渲染器包括webglcanvascanvas是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(一)控制摄像机角度,转载请注明来源!

0