<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Материал</title>
<script src="build/three.min.js"></script>
</head>
<body>
<script >
window.onload = init;
function init() {
// получаем контейнер
var container = document.createElement('div');
document.body.appendChild(container);
// создаем сцену
var scene = new THREE.Scene();
// создаем камеру и устанавливаем её позицию
var camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.1,2000 );
camera.position.y = 150;
camera.position.z = 500;
var line_geometry = new THREE.Geometry();
line_geometry.vertices.push(new THREE.Vector3(0,0,0));
line_geometry.vertices.push(new THREE.Vector3(0,200,80));
var material_line = new THREE.LineBasicMaterial({ color: 0x6699FF, linewidth: 18, fog:true});
var line = new THREE.Line(line_geometry,material_line);
scene.add( line );
render = new THREE.WebGLRenderer();
render.setSize( window.innerWidth, window.innerHeight );
container.appendChild( render.domElement );
render.render( scene, camera );
}
</script>
</body>
</html>
Добавить комментарий
|
1 ответ
В Three.js толщина линий никак не меняется. Можно использовать решение Lee Stemkoski, где он рисует цилиндр, соединяющий две заданные точки pointX, pointY в пространстве, с помощью функции cylinderMesh
javascript
function cylinderMesh( pointX, pointY )<br>
{
var direction = new THREE.Vector3().subVectors( pointY, pointX );
var arrow = new THREE.ArrowHelper(
direction.clone().normalize(), pointX, direction.length() );
var edgeGeometry =
new THREE.CylinderGeometry( 0.1, 0.1, direction.length(), 36, 4 );
var edgeMesh = new THREE.Mesh( edgeGeometry,
new THREE.MeshBasicMaterial( { color: 0x0000ff } ) );
edgeMesh.position = new THREE.Vector3().addVectors( pointX,
direction.multiplyScalar(0.5) );
edgeMesh.setRotationFromEuler( arrow.rotation );
return edgeMesh;
}
-
1В этом уроке ширина работает , ниже ссылка на урок. ( youtube.com/watch?v=lvyN2bo_mgk )– Андрей226 мая 2014 в 12:14
-