• three.js一步一步来--如何用线画出一个面--网格板子


    网格板子~~~

    <template>
      <div style="1000px; height:800px">
        <p>网格布局</p>
        <div ref="myBody" id="canvas-frame" style="1000px; height:800px"/>
      </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, Line } from 'three'
    // 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: {
        initThree() {
          var width = this.$refs.myBody.clientWidth
          var height = this.$refs.myBody.clientHeight
          console.log(width, height)
          this.renderer = new THREE.WebGLRenderer({ antialias: true })
          this.renderer.setSize(width, height)
          this.$refs.myBody.appendChild(this.renderer.domElement)
          this.renderer.setClearColor(0xffffff, 1.0)
        },
        initCamera() {
          this.camera = new THREE.PerspectiveCamera(45, 1.2, 1, 10000)
          this.camera.position.x = 0
          this.camera.position.y = 5000
          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 geometry = new THREE.Geometry()
          // 在x轴上定义两个点p1(-500,0,0),p2(500,0,0)。
          geometry.vertices.push(new THREE.Vector3(-500, 0, 0))
          geometry.vertices.push(new THREE.Vector3(500, 0, 0))
          var myMaterial = new THREE.LineBasicMaterial({
            color: 0x000000,
            opacity: 0.2
          })
          for (var i = 0; i <= 20; i++) {
            var line = new THREE.Line(geometry, myMaterial)
            line.position.z = i * 50 - 500
            this.scene.add(line)
            var line1 = new THREE.Line(geometry, myMaterial)
            line1.position.x = i * 50 - 500
            line1.rotation.y = (90 * Math.PI) / 180
            this.scene.add(line1)
          }
        },
        threeStart() {
          this.initThree()
          this.initCamera()
          this.initScene()
          this.initLight()
          this.initObject()
          this.renderer.clear()
          this.renderer.render(this.scene, this.camera)
        },
        consoleObj() {
          console.log(THREE.REVISION)
          console.log(OBJLoader)
          console.log(MTLLoader)
          console.log(CSS2DRenderer)
          console.log(CSS2DObject)
        }
      }
    }
    </script>
    <style lang="less" scoped>
    #canvas_frame {
      border: none;
      cursor: pointer;
       100%;
      height: 600px;
      background-color: #eeeeee;
    }
    </style>
    
    
  • 相关阅读:
    异常处理的讨论 CQ
    看看这个Lock可不可靠 CQ
    Smart Client Software Factory(SCSF) 之起步 CQ
    建设高性能网站
    关系数据库还是NoSQL数据库
    另类递归
    cacti监控redis状态
    NoSQL书籍大全
    如果判断function的调用者?
    Error while creating db diagram:Cannot insert NULL into column diagram_id
  • 原文地址:https://www.cnblogs.com/sugartang/p/13605631.html
Copyright © 2020-2023  润新知