参考:threeJS开发指南
threeJs三个基本要素
1、scene:一个容器,保存并跟踪我们想渲染的物体
2、camera:定义在scene里能看到什么
3、rederer:计算指定camera角度下scene的样子--使用什么方式渲染(常见利用显卡渲染)
html:引入jQuery-1.9.0、threeJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加光源</title>
<style>
body {
margin: 0;
overflow: hidden;
}
<style/>
</head>
<body>
<div id="WebGl-output"></div>
<script type="text/javascript" src="../../build/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
js:
1、要初始化三要素scene、camera、rederer
// 定义scene,camera,renderer
// scene是一个容器,保存并跟踪我们想渲染的物体
var scene = new THREE.Scene();
// 定义在scene里能看到什么
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000);
// 计算指定camera角度下scene的样子--使用显卡渲染
var renderer = new THREE.WebGLRenderer();
// 背景颜色
renderer.setClearColorHex(0xEEEEEE);
// 背景大小
renderer.setSize(window.innerWidth, window.innerHeight);
2、添加坐标轴
// 创建坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);
3、添加一个灰色的平面
// 创建平面
// 定义平面尺寸 -- 宽60,高20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 颜色
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
// 合并尺寸和颜色
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 定义位置
// 绕着x轴旋转90度
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
4、添加一个正方体
// 创建方块
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
5、添加一个球体
// 创建球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x7777ff,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
6、指定相机的位置和悬挂的角度
// 指定相机的位置,将其悬挂在场景上方
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
// 指向场景中心
camera.lookAt(scene.position);
7、讲scene和camera挂载到html
// 挂载到html上
$("#WebGl-output").append(renderer.domElement);
renderer.render(scene, camera);
结果如图