创建一个静态三维场景
- 博主新手一枚,学习过程中必定有许多理解错误之处,博客主要用于帮助记录自己所学内容,如有错误,恳请大神们批评指出。
- 博主自学机械工业出版社《Three.js开发指南》,本文部分代码参考此书。
效果图
完整代码及注释
<!DOCTYPE html>
<html>
<head>
<title>Three.js学习笔记</title>
<script type="text/javascript" src="js/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1,500);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xFFEC8B, 0.5));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var axes=new THREE.AxisHelper(80);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0XD1EEEE});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = -5;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(6, 6, 6);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0XF0E68C});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
camera.position.x = -40;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 80, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
window.onload = init;
</script>
</body>
</html>
说明
<script type="text/javascript" src="js/three.js"></script>
在我的html文件的同一目录下有一个js文件夹,在此文件夹里有本次实验所需要的three.js。在调用js文件时,一定要注意引用路径的正确。虽然简单,但新手往往在此出错。
- Three.js有两种类型的相机:正投影相机(THREE.OrthographicCamera)和透视相机(THREE.PersepectiveCamera)
透视相机,一种较为自然的视图。相同的物体,距离相机越远,被渲染的越小。
正投影相机,对象和相机之间的距离不会影响渲染的结果,相同物体,无论远近,大小相同。