three.js学习（一）

three.js三要素：场景，相机和渲染器（scene, camera 、renderer）

1、创建场景scene：

var scene = new THREE.Scene();

2、创建渲染器：

var renderer = new THREE.WebGLRenderer();

3、在场景中添加轴

 var axes = new THREE.AxesHelper(20);

  scene.add(axes);

function init() {

// create a scene, that will hold all our elements such as objects, cameras and lights.

var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.

//视角，横纵比，近面距离，远面距离

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器并且设置大小

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0x000000));//背景颜色

renderer.setSize(window.innerWidth, window.innerHeight);

// 在场景中添加轴

var axes = new THREE.AxesHelper(20);

scene.add(axes);

// 创建平面（plane)

var planeGeometry = new THREE.PlaneGeometry(100, 20);

//几何大小

var planeMaterial = new THREE.MeshBasicMaterial({

color:0xAAAAAA

});

//材质

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

//组成一个plane

// rotate and position the plane

plane.rotation.x = -0.5 * Math.PI;

plane.position.set(15, 0, 0);

// add the plane to the scene

scene.add(plane);

// create a cube

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

var cubeMaterial = new THREE.MeshBasicMaterial({

color: 0xFF0000,

wireframe:true

});

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// position the cube

cube.position.set(-4, 3, 0);

//添加到场景中

scene.add(cube);

// create a sphere

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.set(20, 10, 2);

scene.add(sphere);

// position and point the camera to the center of the scene

camera.position.set(30, 40, 30);

camera.lookAt(scene.position);//指向场景中心，确保能够拍到对象

// add the output of the renderer to the html element

document.getElementById("webgl-output").appendChild(renderer.domElement);

// render the scene

renderer.render(scene, camera);

}