three.js学习笔记(1)
程序员文章站
2022-03-27 07:51:55
...
threejs需要放在html中,首先创建如下所示的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>three.js</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
threejs放在这里
</script>
</body>
</html>
使用threejs需要有几个元素,场景,相机,渲染器,你需要xian显示的物体。
首先来创建一个场景
var scene = new THREE.Scene();
创建相机并设置场景的一些参数。
第一个参数是视野角度(FOV)
第二个参数是长宽比(aspect ratio)
接下来的两个参数是近截面(near)和远截面(far)
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
创建渲染器,设置渲染器的宽度和高度,将renderer(渲染器)的dom元素(renderer.domElement)添加到我们的HTML文档中,给body元素插入canvas对象。
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
注意:如果你希望保持你的应用程序的尺寸,但是以较低的分辨率来渲染,你可以在调用setSize时,将updateStyle(第三个参数)设为false,如:renderer.setSize( window.innerWidth, window.innerHeight ,false);
接下来就是,创建我们需要显示的内容了,这里以创建一个立方体为显示目标
var geometry = new THREE.BoxGeometry();
给立方体添加材质,并设置材质的相关参数,如颜色
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
创建一个网格来承载立方体和他的材质,并将网格放在场景中,这样我们才可以看到物体,
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
默认情况下,当调用scene.add()的时候,物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起,这样摄像机就无法看到这个物体,所以需要把摄像机向外移动一些
camera.position.z = 5;
渲染场景,需要使用一个被叫做“渲染循环”(render loop)或者“动画循环”(animate loop)的东西。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
到此,你就可以看到一个绿色的立方体了,这个立方体是不动的,可以在animate方法中jia'加上这些参数,使得立方体xuan旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
完整的代码如下
<html>
<head>
<title>threejs</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
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();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>