第二节:画线
整理第二节笔记。
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>
我是前端菜鸟,如有不正确地方欢迎大神指正,正在学习中…