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

柔光的暖阳◎ 2022-12-08 05:46 114阅读 0赞

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

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

--------------------

### 文章目录 ###

*  three.js学习 《基础入门1》
 *  一、three.js初始导入和样式
 *  二、基础场景构建
 *   *  1.基础mesh模型和线
     *  2.基础灯光
     *  3.相机
     *  4.渲染动画，鼠标控制器部署
 *  总结

--------------------

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

# 二、基础场景构建 #

## 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：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center]  
比较抽象，但还是有点意思的  
参考教程：[http://www.yanhuangxueyuan.com/Three.js/][http_www.yanhuangxueyuan.com_Three.js]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0NzE1OTk0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e84efe78791944c5bc5416230fec2a95.png
[http_www.yanhuangxueyuan.com_Three.js]: http://www.yanhuangxueyuan.com/Three.js/