前言

vue 2 中混入threejs 基本版（一） 没看过的看看啊

完整的项目demo

有了第一节的基本的介绍各位怕是感觉自己有点厉害了，自信心爆棚了，可以做模型了不是，很好，其实还差的远呢！！！

threejs是相当的厉害啊，我感觉我处于绝望之谷，所以各位也别太乐观

还是少说多做吧，瞎扯淡会被骂

进阶进阶那么得有个方向不是吗，好的这次带大家做个厉害的，停留在小小的模型上算什么本事，但是我也会传承我一贯的风格，边讲边做，做个啥呢先给项目创建个分支

名字就随缘了，拼音进阶1，如果还不会操作git 的同学，尽快去学习一下阮一峰的git操作教程，下载项目的时候你们可以切到该对应分支去熟悉

第一节（画一个地板）

还是之前的这个项目啊

看这个图这两个方块变小了，这是我把相机的距离调整了，还记得那个正交相机吗？忘了赶紧去看看

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

我把 const s = 200 改成500了这样视野就会变宽

现在给它加个地板场景就不会显得特别空旷

    /**
     * 创建地板
     */
    const planeGeometry=new THREE.PlaneGeometry(800,300)
    const planeMaterial= new THREE.MeshBasicMaterial({color:0xcccccc  })
    this.planeMesh=new THREE.Mesh(planeGeometry,planeMaterial)
    this.planeMesh.rotateX=Math.PI // 这句有问题
    this.planeMesh.position.x=150
    this.planeMesh.position.y=0
    this.planeMesh.position.z=0
    this.scene.add(this.planeMesh)

呀！！！！地板怎么立起来了 别慌我是故意让它立起来的你们可以先想一想这是为啥

this.planeMesh.rotateX=Math.PI就是这里的代码是错的，应该改成 this.planeMesh.rotation.x=-0.5* Math.PI

下回更新这版先上

vue 2 中混入threejs 进阶版（二）

前言

第一节（画一个地板）