three 在 vue中使用

目錄

一.參考文檔

二.實例步驟

1.準備

2.寫函數init()

(1). 定義容器

(2). 創建場景對象Scene

(3). 創建網格模型mesh，例如球型，並添加到場景中

(4). 創建渲染器對象renderer

(5). 向容器內添加渲染後的結果

---

一.參考文檔

    中文文檔：http://www.webgl3d.cn/threejs/docs/index.html

    three.js教程：http://www.webgl3d.cn/Three.js/

    https://www.jianshu.com/p/765a221f7919

    https://blog.csdn.net/baidu_41601299/article/details/88663673

二.實例步驟

1.準備

在template中準備好容器，放置生成的圖形

在data中準備好要用的變量

在methods中寫方法做初始化準備

放在在mounted執行

2.寫函數init()

(1). 定義容器

     let container=document.getElementById('container')

(2). 創建場景對象Scene

     this.scene = new THREE.Scene();

(3). 創建網格模型mesh，例如球型，並添加到場景中

     文檔例子：https://www.cnblogs.com/jaycethanks/p/12032947.html

     //球型數據

     let geometry=new Three.SphereGeometry(100,10,10)

     //球型材質（具體怎麼使用，之後談論）

    let material=new Three.MeshNormalMaterial()

    //初始化網絡模型對象，給對象添加數據和材質

    this.mesh=new Three.Mesh(geometry,material);

    //將網絡模型對象添加到場景中

    this.scene.add(this.mesh);

(4). 創建渲染器對象renderer

    //初始化渲染器對象

    this.renderer=new Three.WebGLRenderer()；

    //給渲染器對象設置尺寸

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

(5). 向容器內添加渲染後的結果

    container.appendChild(this.renderer.domElement)