第二節：畫線
整理第二節筆記。
1.原生如下：
<html>
<head>
<title>第二節：畫線</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="../js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,500);
camera.position.set( 0, 0, 100);
camera.lookAt( 0, 0, 0);//參數（x軸正值往左反之往右，Y軸正值往下負值往上，Z軸）
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//定義新材料，線（LineBasicMaterial或LineDashedMaterial）
//LineBasicMaterial：通過線段基礎材質可以設置線段的顏色、寬度、端點和連擊點屬性
//LineDashedMaterial:顧名思義就是可以畫虛線
var material = new THREE.LineBasicMaterial({color:0x0000ff });
//材質之後，我們將需要帶有一些頂點的Geometry或BufferGeometry（建議使用BufferGeometry，
//因爲它的性能更高，但是爲簡單起見，我們將在此處使用Geometry）：
var geometry = new THREE.Geometry();
//var geometry = new THREE.BufferGeometry();
geometry.vertices.push(new THREE.Vector3(-10,0,0));
geometry.vertices.push(new THREE.Vector3(0,10,0));
geometry.vertices.push(new THREE.Vector3(10,0,0));
//每對連續的頂點之間連了線，但是沒有將第一個和最後一個頂點連線，即該線未閉合。
var line = new THREE.Line(geometry,material);
scene.add( line );
renderer.render( scene, camera );
</script>
</body>
2.vue這樣：
和第一節同樣，導入three
代碼如下：
<template>
</template>
<script>
import * as THREE from "three"
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
var scene = new THREE.Scene();var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
var line = new THREE.Line( geometry, material );
scene.add( line );
renderer.render( scene, camera );
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
我是前端菜鳥，如有不正確地方歡迎大神指正，正在學習中…