前言

很多小伙伴不知道vue中怎么写入js 这其实是由一些门道的【大家不用着急】很快你就能使用这些简单指令完成一个基本的threejs 小项目

先看一下效果图

这就是最终的效果好像看起来并不是一个复杂的东西没错所有的东西都是由简单到复杂的

我不想先讲threejs那些理论和图我打算混到这篇文章里，这样有助与理解这个项目，首先先准备工作生成一个vue的脚手架如果你还不会生成没关系，你可以先看vuecli的官方教程自己安装vue生成一个也可以参考别人写的博客

安装

命令行工具必须先安装vue 有版本号

blog.csdn.net/fengzhen802…

这篇文章是讲怎么安装vue的

vue-V

vue init webpack my-app

完成了一个vue脚手架

npm安装 vue-template-compiler three

npm i three

npm i vue-template-compiler

核心的实现代码

先把代码放到这里这里我就会一断一断讲这个

 <template>
    <div>
      <div id="container"></div>
    </div>
</template>
 
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls:null,
      meshCar:null
    }
  },
  methods: {
    init: function() {
        /**
     * 创建场景对象Scene
     */
    this.scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    const geometryCar= new THREE.CylinderGeometry(50,50,100,25)
    const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
      opacity:0.7,
      // transparent:true,
      // wireframe:true,
      specular:0x4488ee,
      shininess:12
    }); //材质对象Material
    this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    this.meshCar=new THREE.Mesh(geometryCar,material)
    this.meshCar.position.set(250,0,0)
    this.scene.add(this.mesh); //网格模型添加到场景中
    this.scene.add(this.meshCar); 
    /**
     * 光源设置
     */
    //点光源
    const point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    this.scene.add(point); //点光源添加到场景中
     //环境光
    const ambient = new THREE.AmbientLight(0x444444);
    this.scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    const width = window.innerWidth; //窗口宽度
    const height = window.innerHeight; //窗口高度
    const k = width / height; //窗口宽高比
    const s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    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); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(width, height);//设置渲染区域尺寸
    this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(this.renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    this.controls = new OrbitControls(this.camera,this.renderer.domElement);//创建控件对象
    // this.controls.addEventListener('change', this.render);
    // renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    const axisHelper = new THREE.AxisHelper(250);
    this.scene.add(axisHelper);
    },
    render() {
        this.renderer.render(this.scene,this.camera);//执行渲染操作
        this.mesh.rotateY(-0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(this.render);//请求再次执行渲染函数render
        
    }
  },
  mounted() {
      this.init();
      this.render()
  }
}
</script>
<style scoped>
  #container {
    height: 400px;
  }
</style>
复制代码

—————————————
续更 2021-06-12

直接讲js部分吧其他部分也没什么好讲的

1.引入部分

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
复制代码

这部分是引入three的引入必须要使用 * as 千万不能用import THREE from 'three' 否则会报错然后下面的是引用鼠标控制3D模块的插件，当然这个工具是threejs 这个包里面已经有的直接把他引出来用就可以了如果你直接想用 new THREE.OrbitControls() 这样用不行哦，这个方法并没有添加到three的方法里面

2.设置核心变量

export default {
 name: 'ThreeTest',
  data() {
    return {
      camera: null, // 相机
      scene: null,  // 场景
      renderer: null, // 渲染器
      mesh: null, // 模型1
      controls:null,  // 鼠标控制
      meshCar:null // 模型2
    }
    
    // todo (下面的先不急着讲)
    }
复制代码

如注释所写，这些变量是一个基础3D模型里必不可少的，看着这个代码插入一些小知识，threejs的渲染的三个必不可少的东西

整个程序的结构

对比一下之前的代码是不是清晰很多了？ 而这里的代码将打开three的魅力能让你更好的了解他

等会继续更

2021-6-14（今天端午节）

没人提点意见吗？我写的好没有动力啊烦请小编继续给我置顶，这个系列我想从入门开始做到精通

3.threjs创建（methods方法）

不知道大家对vue熟悉不熟悉，真怕大家不会，methods是vue提供写方法的地方

现在上代码

export default {
   // ....
   //  todo
  methods: {
    init: function() {
        /**
     * 创建场景对象Scene
     */
    this.scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    const geometryCar= new THREE.CylinderGeometry(50,50,100,25)
    const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    const material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
      opacity:0.7,
      // transparent:true,
      // wireframe:true,
      specular:0x4488ee,
      shininess:12
    }); //材质对象Material
    this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    this.meshCar=new THREE.Mesh(geometryCar,material)
    this.meshCar.position.set(250,0,0)
    this.scene.add(this.mesh); //网格模型添加到场景中
    this.scene.add(this.meshCar); 
    
    // ...todo 
    }
    }
复制代码

这个todo 就代表还有上下文，这段代码是介绍场景的我写的 init() 方法是为了生成初始场景的这样，这个init()方法还有下文啊 new THREE.Scene()是直接通过three new出来一个新的场景
,这个时候你们不知道 new就该打屁股了,赶紧去复习一下项目中用了很多new

this.scene = new THREE.Scene(); 是把生成的场景挂载到this.scene,这样就可以通过响应式的方式去访问它，我会用这种方式去处理three生成的代码，所以大家务必知道这个思路，用好一个框架真的可以事半功倍。

接下来生成模型，大家可以看到我用的const 而不是 var 这个也请大家注意一下，我们写代码一定要规范，不能想用什么就用什么，习惯用var后，将可能对团队带来麻烦，如果不清楚两者的区别，也请仔细百度一下 这边只是想让大家规范代码

    const geometryCar= new THREE.CylinderGeometry(50,50,100,25)
    const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
复制代码

就是这么生成一个模型的，看起来非常的简单实用，这边详情讲一下这个api的用法

BoxGeometry()这个方法里面几个参数用法参照下面的自己填写就好了

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X轴上面的宽度，默认值为1。
height — Y轴上面的高度，默认值为1。
depth — Z轴上面的深度，默认值为1。
widthSegments — （可选）宽度的分段数，默认值是1。
heightSegments — （可选）宽度的分段数，默认值是1。
depthSegments — （可选）宽度的分段数，默认值是1。
复制代码

按照如上的顺序依次填写参数就可以使用

如果还想知道更多的直接去three的文档里找吧

threejs文档：www.yanhuangxueyuan.com/threejs/doc…

这里给你们列个表格吧

API	生成模型	用列
BoxGeometry()	长方体	new THREE.BoxGeometry(100, 100, 100)
SphereGeometry()	球体	new THREE.SphereGeometry(60, 40, 40)
CylinderGeometry()	圆柱	new THREE.CylinderGeometry( 50, 50, 100, 25 )
OctahedronGeometry()	正八面体	new THREE.OctahedronGeometry(50)
DodecahedronGeometry()	正十二面体	new THREE.DodecahedronGeometry(50)
IcosahedronGeometry()	正二十面体	new THREE.IcosahedronGeometry(50)

当然你可以自定义形状

下次在更吧先这样

项目地址：github.com/gao-junfeng…

安装的时候要注意，需要安装 vue-template-compiler 这个工具是可以让threejs在vue中运行的插件这个必须要安装注意版本号一定要更vue的版本保持一致，否则会报错

` vue@2.6.13

`- vue-template-compiler@2.6.14

`This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.“`

说的就是vue@2.6.13 和 vue-template-compiler@2.6.14 的版本不一致

安装的时候最好用cnpm 安装不清楚的可以百度一下cnpm 是怎么用的

文章版权归作者所有，未经允许请勿转载。

THE END

前端