three.js一步一步来--如何画出一根线

下面是画出线的代码，可以参考一下哟~~
<template>

  <div style="width:1000px; height:800px">

    <p>点、线、面</p>

    <div ref="myBody" />

  </div>

</template>

<script>

import * as THREE from 'three'

import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'

// import MTLLoader from  'three-mtl-loader';

// import OBJLoader from  'three-obj-loader';

import { CSS2DRenderer, CSS2DObject } from 'three-css2drender'

// import { Geometry, Material, Scene, WebGLBufferRenderer } from 'three';

// const OrbitControls = require('three-orbit-controls')(THREE);

export default {

  data() {

    return {

      scene: new THREE.Scene(),

      camera: new THREE.PerspectiveCamera(

        45,

        window.innerWidth / window.innerHeight,

        1,

        10000

      ), // 透视相机

      renderer: new THREE.WebGLRenderer(), // 渲染器

      geometry: new THREE.Geometry(), // 物体

      material: new THREE.LineBasicMaterial({ vertexColors: true }), // 材料

      cube: {}, // 合起來

      // 线条

      light: new THREE.DirectionalLight(0xff0000, 1.0, 0)

    }

  },

  mounted() {

    this.threeStart()

  },

  methods: {

    consoleObj() {

      console.log(THREE.REVISION)

      console.log(OBJLoader)

      console.log(MTLLoader)

      console.log(CSS2DRenderer)

      console.log(CSS2DObject)

    },

    initThree() {

      this.renderer = new THREE.WebGLRenderer({

        antialias: true

      })

      this.renderer.setSize(window.innerWidth, window.innerHeight) // 渲染器窗口大小

      this.$refs.myBody.appendChild(this.renderer.domElement) // 将东西放到界面

      this.renderer.setClearColor(0xffffff, 1.0) // 渲染器背景色

    },

    initCamera() {

      this.camera = new THREE.PerspectiveCamera(45, 1.5, 1, 10000)

      this.camera.position.x = 0

      this.camera.position.y = 1000

      this.camera.position.z = 0

      this.camera.up.x = 0

      this.camera.up.y = 0

      this.camera.up.z = 1

      this.camera.lookAt(0, 0, 0)

    },

    initScene() {

      this.scene = new THREE.Scene()

    },

    initLight() {

      this.light = new THREE.DirectionalLight(0xff0000, 1.0, 0)

      this.light.position.set(100, 100, 200)

      this.scene.add(this.light)

    },

    initObject() {

      var color1 = new THREE.Color(0x444444)

      var color2 = new THREE.Color(0xff0000)

      // 设置材质

      var p1 = new THREE.Vector3(-100, 0, 100)

      var p2 = new THREE.Vector3(100, 0, -100)

      this.geometry.vertices.push(p1, p2)

      this.geometry.colors.push(color1, color2)

      var line = new THREE.Line(

        this.geometry,

        this.material,

        THREE.LineSegments

      )

      this.scene.add(line)

    },

    threeStart() {

      this.initThree()

      this.initCamera()

      this.initScene()

      this.initLight()

      this.initObject()

      // this.renderer.clear()

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

    }

  }

}

</script>

<style lang="less" scoped></style>
巴特西

three.js一步一步来--如何画出一根线

最新文章

热门文章
