Vue+Three.js 入门一（搭建第一个3D场景）

前言

   由于本文介绍的是Vue + Three.js，所以首先我们肯定需要下载依赖包，一般地执行npm install three -s即可，可根据需求加装其他依赖包(新版本中不需要这些)：

安装轨道控件插件：npm install three-orbit-controls

安装加载.obj和.mtl文件的插件：npm i --save three-obj-mtl-loader

安装渲染器插件：npm i --save three-css2drender

官方文档：https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

一个场景的基本要素

  1、场景（scene）：这里的场景可以理解为一个三维的虚拟环境，当代码执行完var scene = new THREE.Scene();的时候，也就是说浏览器提供了一个等待填充虚拟环境。

  2、相机（camera）：上面说浏览器提供了一个虚拟环境，当我们向里面填充物体时，scene.add( 物体对象A );这个虚拟环境就有了这个虚拟物体A，但是我们看不见。而camera就充当我们眼睛的作用，将它看到的信息传递给我们。当执行完var camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 );之后，scene里面就是在坐标（0，0，0）处就建立了一个camera。

  3、渲染器（renderer）：不管是scene还是camera，他们都是数据虚拟出来的，而renderer的作用就是将camera所“看见”的信息完整的渲染到界面上，从而给我们一个视觉上的三维冲击；camera的作用是眼睛的话，而renderer就是将“眼睛”在虚拟的三维世界里看到的信息显示在浏览器上面。renderer.render( scene, camera );

搭建第一个场景

<template>

  <div class="main-view">

    <div id="demo1" style="width: 100%;height: 100%"></div>

  </div>

</template>



<script>

  import * as THREE from 'three'   // 引入three

  export default {

    data () {

      return {

        camera:null,

        scene:null,

        renderer:null,

        mesh:null

      }

    },

    methods:{

      init(){

        let container=document.getElementById('demo1')

        this.camera=new THREE.PerspectiveCamera(70,container.clientWidth/container.clientHeight,0.01,10)



        this.camera.position.z=0.6

        this.scene=new THREE.Scene()

        let geometry=new THREE.BoxGeometry(0.2,0.2,0.2)

        let material=new THREE.MeshNormalMaterial()

        this.mesh=new THREE.Mesh(geometry,material)

        this.scene.add(this.mesh)



        this.renderer=new THREE.WebGLRenderer({antialias:true})

        this.renderer.setSize(container.clientWidth,container.clientHeight)

        container.appendChild(this.renderer.domElement)

        this.mesh.rotation.x+=45

        this.mesh.rotation.y+=45

        this.renderer.render(this.scene,this.camera)

      },

    },

    mounted(){

      this.init()

    }

  }

</script>



<style scoped>



</style>