three.js - 绘制 3D 对象轴 Threejs

Question

如何绘制对象轴。我指的是网格局部轴而不是世界轴。我知道使用:

function drawlines(){
            var material = new THREE.LineBasicMaterial({
                    color: 0x0000ff
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 100, 0, 0 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );

                var material = new THREE.LineBasicMaterial({
                    color: 0x00ff00
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 0, 100, 0 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );

                var material = new THREE.LineBasicMaterial({
                    color: 0xff0000
                });

                var geometry = new THREE.Geometry();
                geometry.vertices.push(
                    new THREE.Vector3( 0, 0, 100 ),
                    new THREE.Vector3( 0, 0, 0 )
                );

                var line = new THREE.Line( geometry, material );
                scene.add( line );
        }

分别在 XYZ 处画线。我需要的是绘制模型的 XYZ 轴。我怎样才能做到这一点。我用这段代码加载模型

var loader = new THREE.JSONLoader();
            loader.load( "https://threejs.org/examples/models/animated/horse.js", function ( geometry ) {
                var material = new THREE.MeshLambertMaterial( {
                    vertexColors: THREE.FaceColors,
                    morphTargets: true,
                    overdraw: 0.5
                } );
                mesh = new THREE.Mesh( geometry, material );
                mesh.scale.set( 1.5, 1.5, 1.5 );
                scene.add( mesh );
                mixer = new THREE.AnimationMixer( mesh );
                var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
                mixer.clipAction( clip ).setDuration( 1 ).play();
            } );

Answer 1

如果我的理解正确，您可以使用THREE.AxisHelper()。只需创建它的一个实例，然后将其添加到您的模型中即可。

jsfiddle示例。

var camera, scene, renderer, controls;
var sphere, cube;
init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 5, 1.5).setLength(100);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.setClearColor(0xcccccc);
  document.body.appendChild(renderer.domElement);
 
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var plane = new THREE.GridHelper(100, 10);
  scene.add(plane);
    
  sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 16, 8), new THREE.MeshBasicMaterial({color: "red", wireframe: true}));
  sphere.position.set(-20, 0, 0);
  cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "green", wireframe: true}));
  cube.position.set(20, 0, 0);
  var worldAxis = new THREE.AxesHelper(20);
  scene.add(worldAxis);
  scene.add(sphere);
  scene.add(cube);
  
  var sphereAxis = new THREE.AxesHelper(20);
  sphere.add(sphereAxis);
  var cubeAxis = new THREE.AxesHelper(20);
  cube.add(cubeAxis);
}

var delta;
function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}