three.js学习《基础入门1》

three.js学习 《基础入门1》

慢慢学，立志成为手撸3d网页场景大佬

---

---

一、three.js初始导入和样式

	<script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <!--控制器包，在three.js-master\examples\js\controls下-->
    <style>
        body {
          margin: 0;
          overflow: hidden;
          /* 隐藏body窗口区域滚动条 */
        }
      </style>

二、基础场景构建

1.基础mesh模型和线

代码如下（示例）：

var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
//var geometry1 = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
//随便撸个线段，函数代表线走到哪
var geometry_line = new THREE.Geometry();
geometry_line.vertices.push(new THREE.Vector3( 0, 0, 0) );
geometry_line.vertices.push(new THREE.Vector3( 100, 0, 0) );
geometry_line.vertices.push(new THREE.Vector3( 0, 100, 0) );
geometry_line.vertices.push(new THREE.Vector3( 0, 0, 100) );
geometry_line.vertices.push(new THREE.Vector3( 0, 0, 0) );
//材质设置
var material_mesh = new THREE.MeshLambertMaterial({
    color: 0x0000ff
});
var material_Line = new THREE.LineBasicMaterial( {
    color: 0xff0000
} );

//材质对象Material
var mesh = new THREE.Mesh(geometry, material_mesh); //网格模型对象Mesh
var mesh_line = new THREE.Line(geometry_line, material_Line); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
scene.add(mesh_line);

2.基础灯光

代码如下（示例）：

//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

3.相机

//点光源
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 400; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
//var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);//正视相机
var camera = new THREE.PerspectiveCamera(45,k, 1, 1000);//透视相机
camera.position.set(s, s, s); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

4.渲染动画，鼠标控制器部署

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

var i=0;
//执行渲染操作   指定场景、相机作为参数
function render() {
    renderer.render(scene,camera);//执行渲染操作
    mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    mesh.rotateX(0.01);
    /*下面几行是相机自动旋转，不能与THREE.OrbitControls连用不然有控制冲突*/
    //i=i+0.01;
    //camera.position.set(Math.sin(i)*s, 150, Math.cos(i)*s);
    //camera.lookAt(scene.position);
    
    requestAnimationFrame(render);//请求再次执行，默认频率60fps
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象

---

总结

上面的代码直接放在body里就行了，基础的一些东西都在这儿了，做出来的效果emmm：

比较抽象，但还是有点意思的
参考教程：http://www.yanhuangxueyuan.com/Three.js/