准备工做
1.运用three.js进行3d开发，其实和页面编程同样，首先须要在html文件中引入three.js。Three.js使用面向对象的方式来构建程序，它包含3个基本对象： 场景（scene）, 相机（camera）, 以及一个渲染器（renderer）。
第一步： 引入three.js.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
</head>
<body>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script> </script>
</body>
</html>
第二步： 用js代码建立3D场景（scene），很是简单就一行代码.
let scene = new THREE.Scene();
第三步：用js代码建立相机（camera），再肯定其位置,下面代码也就两行，可是多了参数。来讲明一下参数的做用：
let camera = PerspectiveCamera( fov, aspect, near, far );
camera.position.set( x, y,z);
通常给下面这组值来肯定相机可以看得的位置：
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 100,300 );
第四步：用js代码建立渲染器（renderer),设置渲染页面大小，通常为相机肯定的3d页面大小,最后一行是把渲染器加入页面.
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );
第五步：给3d页面添加一个白色环境光这样咱们才可以看见物体：
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);
scene.add( ambientLight );
最后一步：开始时刻渲染3d页面，虽然完成了最后一步，可是运行代码后咱们仍是不能看见任何东西，那是由于咱们只渲染了3d页面，并无添加事物到页面，接下来咱们就来添加一个球吧：
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
添加个球吧,添加了下面代码再运行下发现3d页面上有一个红色的球了,可是咱们不能用鼠标来控制它，那是由于three.js里面没有来写鼠标的控制3d页面，咱们还须要引入鼠标控制插件OrbitControls.js。
let ball= new THREE.SphereGeometry( 5, 32, 32 );
let ballColor= new THREE.MeshBasicMaterial( {color: 0xffff00} );
let sphere = new THREE.Mesh( ball, ballColor);
scene.add( sphere );
再添加格子辅助线方便咱们观察和调整物体位置：
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );
scene.add( grid );
引入OrbitControls.js，而后初始化控件，在运行页面发现能够用鼠标来控制这个球了，就问你完不完美，beautiful 不 beautiful;
<script src="/libs/OrbitControls.js"></script>
let controls =newTHREE.OrbitControls(camera);
controls.enableZoom =true;
controls.minDistance = 1;
controls.maxDistance = 2000;
controls.enableRotate =true;
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>demo1</title>
</head>
<body>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<script> let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 ); camera.position.set( 0, 50,300 ); let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement ); let ambientLight = new THREE.AmbientLight( 0xf5f5f5); scene.add( ambientLight ); let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc ); scene.add( grid ); let ball = new THREE.SphereGeometry( 5, 32, 32 ); let ballColor = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); let cube = new THREE.Mesh( ball , ballColor ); scene.add( cube ); let controls =new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom =true; controls.minDistance = 1; controls.maxDistance = 2000; controls.enableRotate =true; function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); </script>
</body>
</html>