three.js一步一步来--如何用线画出一个面--网格板子
网格板子~~~
<template>
<div style="width:1000px; height:800px">
<p>网格布局</p>
<div ref="myBody" id="canvas-frame" style="width: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;
width: 100%;
height: 600px;
background-color: #eeeeee;
}
</style>