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>