基于VUE-CLI框架开发THREE.JS从入门开始（2）线的绘制

最新推荐文章于 2024-01-20 13:32:53 发布

前端从迷茫到火葬

最新推荐文章于 2024-01-20 13:32:53 发布

阅读量442

点赞数

分类专栏： three 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_15793923/article/details/103908978

版权

three 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

基于VUE-CLI框架开发THREE.JS从入门开始（2）

开发环境

开发工具

webstorm编辑器
node.js

前台框架

vue-cli 框架

webstorm可以直接安装

引用脚本

webgl封装库three.js 项目路径下安装（编辑器内右键点击项目根文件夹，选择Open in Terminal） ：

npm install three

我直接放到vue对象内了，代码如下

import Vue from 'vue'
import App from './App.vue'
import * as THREE from 'three'
//引用three
Vue.config.productionTip = false
Vue.prototype.THREE = THREE
//将three加入到vue对象内
new Vue({
  render: h => h(App),
}).$mount('#app')

基本概念

1.创建三维坐标点：THREE.Vector3(x,y,z)
2.标题线的材料：

代码

<template>
    <div></div>
</template>
<script>
    export default {
        name: "ThreeTest1",
        mounted () {
            let scene = new this.THREE.Scene();
            //创建场景
            let camera = new this.THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100);
            camera.position.set( 0, 0, 100 );
            camera.lookAt( 0, 0, 0 );
            /*
            * 创建PerspectiveCamera 透视相机
            *   视野角度
            *   长宽比
            *   近截面
            *   远截面
            * */
            let renderer = new this.THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth/2, window.innerHeight/2);
            document.body.appendChild(renderer.domElement);
            /*
            * 创建WebGLRenderer渲染器
            *   1.添加对象 setSize 设置渲染器的宽高 入参 （宽度 高度）
            *   2.将渲染器的dom对象添加到页面
            * */
            var geometry = new this.THREE.Geometry();
            //设置具有几何顶点的几何（Geometry）或缓冲区几何（BufferGeometry）设置顶点位置，看名字就知道了，一个是直接将数据保存在js里面的，另一个是保存在WebGL缓冲区内的，而且肯定保存到WebGL缓冲区内的效率更高
            geometry.vertices.push(new  this.THREE.Vector3( -10, -10, 0) );
            geometry.vertices.push(new  this.THREE.Vector3( -10, 10, 0) );
            geometry.vertices.push(new  this.THREE.Vector3( 10, 10, 0) );
            geometry.vertices.push(new  this.THREE.Vector3( 10, -10, 0) );
            geometry.vertices.push(new  this.THREE.Vector3( -10, -10, 0) );
            //定义线的基本材料，我们可以使用LineBasicMaterial（实线材料）和LineDashedMaterial（虚线材料）
            let material = new this.THREE.LineBasicMaterial({color: 0x0000ff});
            var line = new  this.THREE.Line( geometry, material );
            scene.add( line );
            renderer.render( scene, camera );

        }
    }
</script>

<style scoped>

</style>