LoginSignup
2
2

More than 5 years have passed since last update.

three.js(r69)で線の太さがWindowsで効かないってば!

Last updated at Posted at 2017-07-04

直方体 (5) | three.js

Chrome(Mac)で見たLine Chrome(Windows)で見たLine
threejs_cuboid6_line5_mac.png threejs_cuboid6_line5_win.png

var _geometry = new THREE.BoxGeometry(200, 150, 250, 1, 1, 1);
var geometry = new THREE.Geometry();
geometry.vertices.push(_geometry.vertices[0]);
geometry.vertices.push(_geometry.vertices[1]);
var material = new THREE.LineBasicMaterial({color: 0x000000});
material.linewidth = 2;
var line = new THREE.Line(geometry, material);
scene.add(line);

Windowsでは、LineBasicMaterialのlinewidthが効かないらしい。:umbrella:

直方体 (6) | three.js

Chrome(Mac)で見たCylinder Chrome(Windows)で見たCylinder
threejs_cuboid6_line6_mac.png threejs_cuboid6_line6_win.png

var _geometry = new THREE.BoxGeometry(200, 150, 250, 1, 1, 1);
var vertices = _geometry.vertices;
var material = new THREE.MeshBasicMaterial({side: THREE.BackSide, color: 0x000000});
var line = createLine(vertices[0], vertices[1], material);
scene.add(line);

function createLine(vector0, vector1, material) {
    var line3D, center, vector, height;
    var geometry, line;
    line3D = new THREE.Line3(vector0, vector1);
    center = line3D.center();
    vector = vector0.clone().sub(vector1);
    height = vector.length();
    geometry = new THREE.CylinderGeometry(1, 1, height, 4);
    line = new THREE.Mesh(geometry, material.clone());
    line.position.set(center.x, center.y, center.z);
    var axis, direction, rad, quaternion;
    var y_up = new THREE.Vector3(0, 1, 0);
    axis = vector.normalize();
    direction = new THREE.Vector3();
    direction.crossVectors(y_up, axis).normalize();
    rad = Math.acos(y_up.dot(axis));
    quaternion = new THREE.Quaternion();
    quaternion.setFromAxisAngle(direction, rad);
    line.rotation.setFromQuaternion(quaternion);
    return line;
}

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2