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)