javascript – Three.js doesn't work (linewidth :)

Question:

<!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>

Answer:

In Three.js, the line width does not change in any way. Lee Stemkoski's solution can be used where he draws a cylinder connecting two given points pointX, pointY in space using the cylinderMesh function

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;
}

Lee Stemkoski

Post Views: 5
Scroll to Top