跟我一起学Three.js--2. 用Three.js 创建你的第一个三维场景
1.了解场景的三大组件
在Three.js 中,要渲染物体到网页中,我们需要3个组件:
- 场景(scene)
- 相机(camera)
- 渲染器(renderer)
有了这3样东西,才能将物体渲染到网页中去。
创建三要素的代码如下:
2.添加辅助的坐标轴和平面
// 创建一个场景,该场景将保存所有的元素,如对象,相机和灯光
var scene = new THREE.Scene();
// 创建一个摄像机,它定义了我们要看的地方
// PerspectiveCamera的4个参数:
// 第一个参数:是视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,
// 它的值是一个角度。
// 第二个参数是长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的比值。
// 比如说,当你在一个宽屏电视上播放老电影时,可以看到图像仿佛是被压扁的;
// 接下来的两个参数是远剪切面和近剪切面。 也就是说当物体所在的位置比摄像机的远剪切面远或者所在
// 位置比近剪切面近的时候,该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响,
// 但未来为了获得更好的渲染性能,你将可以在你的应用程序里去设置它;
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
// 创建一个渲染器并设置背景颜色和大小
// 保持应用程序的尺寸,但是以较低的分辨率来渲染,可以在调用setSize时,给updateStyle(第三个参数)
// 传入false。调用setSize(window.innerWidth/2, window.innerHeight/2, false)将使得你的应用程
// 序以一半的分辨率来进行渲染;
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex();
renderer.setClearColor(new THREE.Color(0xcccccc));
renderer.setSize(window.innerWidth,window.innerHeight);
我们有了一个基本上是空白的scene,一个renderer 和一个camera,但是还没有要渲染的东西,下面
的代码用来添加辅助的坐标轴和平面:
//在屏幕上显示轴
var axis = new THREE.AxisHelper(20);
//将轴添加到场景中
scene.add(axis);
// 创建地平面
var planeGeometry = new THREE.PlaneGeometry(60,20);
var planeMaterial = new THREE.MeshBasicMaterial({color:0x055516});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
//旋转并定位平面
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
//把平面添加到场景中
scene.add(plane)
3.指定相机的位置,确保相机能够拍摄到这些物体
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
//为了确保相机能够拍摄到这些物体,我们使用了lookAt()函数指向场景的中心
camera.lookAt(scene.position);
4.输出元素,渲染场景
document.getElementById('dv').appendChild(renderer.domElement)
renderer.render(scene, camera)
5.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>这世界唯一的妳</title>
</head>
<script src="./libs/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<body onload="init();">
<div id="dv"></div>
<script>
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
var axis = new THREE.AxisHelper(20);
scene.add(axis);
var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI
plane.position.x = 10;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane)
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
document.getElementById('dv').appendChild(renderer.domElement)
renderer.render(scene, camera)
}
</script>
</body>
</html>