what is Vector3

线条!


what is Vector3_第1张图片
api

Threejs没有单独画点的函数,必须放到一个THREE.Geometry形状中,这个结构中包含一个数组vertices,这个vertices可以存放许多的点。


what is Vector3_第2张图片
画线的过程

具体代码如下:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

var axes = new THREE.AxisHelper(20)
scene.add(axes)
var a = new THREE.Vector3( 10, 0, 10 );

//no arguments; will be initialised to (0, 0, 0)
var b = new THREE.Vector3( );

var d = a.distanceTo( b );


var geometry = new THREE.Geometry();
geometry.vertices.push(a, b)
var material = new THREE.LineBasicMaterial({
    color: 0x000000
});
var line = new THREE.Line( geometry, material );

scene.add(line)

camera.position.x = 30;
camera.position.y = 40;
camera.position.z = 30;
// camera.lookAt(new THREE.Vector3(0,0,0));
camera.lookAt(scene.position);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize( window.innerWidth, window.innerHeight );

document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
what is Vector3_第3张图片
image.png

你可能感兴趣的:(what is Vector3)