美文网首页
Three.js 之初级入门

Three.js 之初级入门

作者: 酷酷的凯先生 | 来源:发表于2020-08-15 15:11 被阅读0次

    #. 前言

    Three.js 是基于原生 WebGL 封装运行的三维引擎,在所有 WebGL 引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。

    可用于物联网3D可视化、产品720在线预览、数据可视化、科教领域、家装室内设计相关及WebVR相关等。

    本质上主要借助于 canvas 来实现,一般前端比较复杂的绘图基本上都是 canvas (画布)。

    #. 引入

    1. npm 安装
    npm install three --save-dev
    
    import * as THREEfrom 'three'
    
    1. script 标签引入
    <script src="../assets/js/thress.js"> </script>
    

    #. 使用

    一般使用 three.js 分为三步:创建场景 ==> 创建相机 ==> 创建渲染器。

    1. 创建场景

    // 创建一个场景
    let scene = new THREE.Scene();
    

    2. 创建相机

    // 创建一个投射相机 (接收四个参数)
    // 第一个参数:视角  
    // 第二个参数:宽高比 
    // 第三个参数:近面距离 (z轴)
    // 第四个参数:远面距离 (z轴)
    let wh = window.innerWidth / window.innderHeight;
    let camera = new THREE.PerspectiveCamera(65, wh, 100, 1000);
    // 设置相机的位置
    camera.position.z = 500 或 camera.set(0,0,500);
    

    3. 创造渲染器

    // 创建渲染器
    let renderer = new THREE.WebGLRenderer({
      antialias:true // 去除锯齿
    });
    // 设置渲染器大小
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染器的背景色 与 透明度
    renderer.setClearColor(0xff00ff, 1);  
    

    写到这这里, 基本步骤就完成了。但只是一个空场景并没有什么东西,我们来创建一个几何体,举个栗子:

    // 创建一个 长、宽、高都是 100 的正方体
    let geometry = new THREE.BoxGeomotry(100,100,100);
    
    // 指定几何体的材料
    // 这种为 简单着色(平面或线框)方式来绘制几何体的材质
    // 不受光照的影响 即不能使用 DirectionalLight(平行光) 及 AmbientLight(环境光) 
    let material = new THREE.MeshBasicMaterial({  // 方式一
      color: 0x00ff00
    });
    
    // 也可设置高光材质,这种材质必须设置  AmbientLight(环境光)  
    let material = new THREE.MeshPhongMaterial({ // 方式二
      color: 0x00ff00
    });
    // AmbientLight(环境光)  
    let light = new Three.AmbientLight( 0x00e5fd ); // soft white light
    scene.add(light);
    
    // 把几何体 和 材料组合起来, 形成网格
    let cube = new THREE.Mesh(geometry, material);
    // 旋转网格
    cube.rotation.x = 0.3; 
    cube.rotation.y = 0.5; 
    // 把网格放到场景中
    scene.add(cube);
    

    4. 把 canvas 渲染在页面上

    // 把创建好的canvas放在页面中
    document.body.appendChild(renderer.domElement);
    // 渲染创建好的场景 和 相机
    renderer.render(scene, camera);
    

    5. 自动旋转

    function animate(){
      cube.rotation.x += 0.1; 
      cube.rotation.y = 0.1; 
      renderer.render(scene, camera);
      // 这一帧执行完,自动执行下一帧 
      requestAnimationFrame(animate);
    }
    // 调用动画
    animate();
    

    6. 鼠标控制

    安装
    npm install three-orbitcontrols --s
    引入
    import 'three-orbitcontrols'
    使用
    let controls = new Three.OrbitControls(camera, renderer.domElement);
    controls.update();
    

    到这里就完成啦,赶快试试吧~~
    别忘记点赞哦~~

    相关文章

      网友评论

          本文标题:Three.js 之初级入门

          本文链接:https://www.haomeiwen.com/subject/tgcadktx.html