（THREE.JS）為自定義緩沖區幾何計算自定義UV

Question

我正在嘗試使用三個JS中的一些頂點數組來創建曲線牆。 我將在數組中得到的是2D的一些基本頂點，這將是牆的底部頂點。 其中包括中心，上下頂點，這意味着它是兩面牆。 基於這些頂點，我添加了一些壁高並將該2D轉換為3D。
下面是代碼和工作小提琴

/**
 * Created by Singh on 7/30/2018.
 */

var renderer, scene, camera;

init();
animate();


function init() {
    wallsGeometry = function(totalPoints){


    var material = new THREE.MeshBasicMaterial({/*color: 0xff0000,*/ side: THREE.DoubleSide, wireframe : false});
    var material2 = new THREE.MeshBasicMaterial({/*color: 0x0044400, */side: THREE.DoubleSide, wireframe : true});

    var geometry = new THREE.BufferGeometry();
    var geometry2 = new THREE.BufferGeometry();

    var wallHeight = 200;


    var pointindices = [
        0,1,2,0,2,3,   //left

        5,4,7,5,7,6,   //right

        4,0,3,4,3,7,  //back

        1,5,6,1,6,2,    //front

        2,6,7,2,7,3,    //top

        5,1,0,5,0,4,  //bottom

    ];

    var pointindices2 = [
        1,0,2,1,3,2 , //left

        4,5,7,4,6,7,   //right

        0,4,3,0,7,3,  //back

        5,1,2,5,2,6,    //front

        6,2,7,6,3,7,    //top

        1,5,0,1,4,0,  //bottom

    ];

    var tempIndices = [];
    var tempIndices2 = [];


    for(var i=0; i<4; i++) {
        for (var j = 0; j < pointindices.length; j++) {
            tempIndices[pointindices.length * i + j] = 4 * i + pointindices[j];
        }
    }
    for(var i=0; i<4; i++) {
        for (var j = 0; j < pointindices2.length; j++) {
            tempIndices2[pointindices2.length * i + j] = 4 * i + pointindices2[j];
        }
    }


    var tempVerMesh = [];
    var tempVerMesh2 = [];

    var indices = new Uint32Array( tempIndices       );
    var pointsArray = { // for testing
        pointUpper1: new THREE.Vector3(),
        pointUpper2: new THREE.Vector3(),
        pointCenter1: new THREE.Vector3(),
        pointCenter2: new THREE.Vector3(),
        pointLower1: new THREE.Vector3(),
        pointLower2: new THREE.Vector3()
    };

console.log(totalPoints);
    /*function generateUVs(geometry) {
        geometry.computeBoundingBox();

        var max = geometry.boundingBox.max, min = geometry.boundingBox.min;

        var offset = new THREE.Vector3(0 - min.x, 0 - min.y);
        var range = new THREE.Vector3(max.x - min.x, max.y - min.y);
        var faces = geometry.faces;

        geometry.faceVertexUvs[0] = [];

        for (var i = 0; i < faces.length ; i++) {

            var v1 = geometry.vertices[faces[i].a],
                v2 = geometry.vertices[faces[i].b],
                v3 = geometry.vertices[faces[i].c];

            geometry.faceVertexUvs[0].push([
                new THREE.Vector3((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
                new THREE.Vector3((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
                new THREE.Vector3((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y),
            ]);
        }
        geometry.uvsNeedUpdate = true;
        return geometry;
    }*/
        for (var i = 0; i < totalPoints.lower.length    ; i++) {
            pointsArray.pointCenter1 = totalPoints.center[i];
            //pointsArray.pointCenter2 = totalPoints.center[i + 1];
            pointsArray.pointLower1 = totalPoints.lower[i];
            //pointsArray.pointLower2 = totalPoints.lower[i + 1];
            pointsArray.pointUpper1 = totalPoints.upper[i];
            //pointsArray.pointUpper2 = totalPoints.upper[i + 1];
            tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
            tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y, pointsArray.pointLower1.z);
            tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y + wallHeight, pointsArray.pointLower1.z);
            tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);



            tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z);
            tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y, pointsArray.pointUpper1.z);

            tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y + wallHeight, pointsArray.pointUpper1.z );
            tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z);

        }


    var vertices = new Float32Array(tempVerMesh);
    var vertices2 = new Float32Array(tempVerMesh2);

    //var uvs = new Float32Array(pointUVs);

            geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
            geometry.setIndex(new THREE.BufferAttribute(indices, 1));
            //geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));

            geometry.computeFaceNormals();
            geometry.computeVertexNormals();
    console.log(geometry);

            var mesh = new THREE.Mesh(geometry, material);



    var indices2 = new Uint32Array(tempIndices2);
    geometry2.addAttribute('position', new THREE.BufferAttribute(vertices2, 3));
    geometry2.setIndex(new THREE.BufferAttribute(indices2, 1));



    geometry2.computeFaceNormals();
    geometry2.computeVertexNormals();

   /*var geom = new THREE.Geometry().fromBufferGeometry(geometry2);
    var temp = generateUVs(geom);
    geometry2 = new THREE.BufferGeometry().fromGeometry(temp);*/
    var mesh2 = new THREE.Mesh(geometry2, material2);


    //geometry2.addAttribute('uv', new THREE.BufferAttribute(uvs2, 2));


    return [mesh,mesh2];

};

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 400;

scene = new THREE.Scene();

var arrow;
var rayCaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.domElement.addEventListener("mousemove", onMouseMove);

var points = {
    pointUpper1: new THREE.Vector3(-70, 0, -20),
    pointUpper2: new THREE.Vector3(130, 0, -20),
    pointCenter1: new THREE.Vector3(-100, 0, 0),
    pointCenter2: new THREE.Vector3(150, 0, 0),
    pointLower1: new THREE.Vector3(-70, 0, 20),
    pointLower2: new THREE.Vector3(130, 0, 20)
};

var totalPoints = {
    center : [new THREE.Vector3(-70, 0, 0),new THREE.Vector3(0, 0, 0),new THREE.Vector3(50, 0, 0),new THREE.Vector3(100, 0, 0),new THREE.Vector3(130, 0, 0)],
    lower : [new THREE.Vector3(-70, 0, 20),new THREE.Vector3(0, 0, 20),new THREE.Vector3(50, 0, 20),new THREE.Vector3(100, 0, 20),new THREE.Vector3(130, 0, 20)],
    upper : [new THREE.Vector3(-70, 0, -20),new THREE.Vector3(0, 0, -20),new THREE.Vector3(50, 0, -20),new THREE.Vector3(100, 0, -20),new THREE.Vector3(130, 0, -20)]
};

var sphere = new THREE.SphereGeometry(2, 10, 10);

function initPoints(){
    var point1mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
    point1mesh.position.copy(points.pointUpper1);
    scene.add(point1mesh);

    var point2mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
    point2mesh.position.copy(points.pointUpper2);
    scene.add(point2mesh);

    var point3mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
    point3mesh.position.copy(points.pointCenter1);
    scene.add(point3mesh);

    var point4mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
    point4mesh.position.copy(points.pointCenter2);
    scene.add(point4mesh);

    var point5mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0xff00}));
    point5mesh.position.copy(points.pointLower1);
    scene.add(point5mesh);

    var point6mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: 0x0000ff}));
    point6mesh.position.copy(points.pointLower2);
    scene.add(point6mesh);
}
 initPoints();

    var mesh = new wallsGeometry(totalPoints);



function createArrow() {
    var length = 30;
    arrow = new THREE.ArrowHelper(
        THREE.Object3D.DefaultUp,
        new THREE.Vector3(),
        length,
        0xffff00,
        1.5 * length,
        1.25 * length
    );
    arrow.position.z = 10;
    scene.add(arrow);
}
// arrow
createArrow();

function updateArrow(object, point, face) {
    arrow.position.copy(point);
    var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );
    var normal = face.normal.clone().applyMatrix3( normalMatrix ).normalize();
    arrow.setDirection(normal);
}

function onMouseMove(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    rayCaster.setFromCamera(mouse, camera);

    var intersects = rayCaster.intersectObject(mesh[0], true);
    var i, il, intersect;
    if (intersects[0]) {
        var face = intersects[0].face;
        var point = intersects[0].point;
        var object = intersects[0].object;
        updateArrow(object, point, face);
    }
}
/*         var textureLoader = new THREE.TextureLoader();
    textureLoader.load('./textures/Capture.PNG', function (texture) {
        console.log('texture loaded');
        texture.minFilter = THREE.LinearFilter;

        //mesh[0].material.map = texture;
        var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[0], 10 );
        mesh[0].add( vertexNormalsHelper );
    }); */
        scene.add(mesh[0]);

 /*     textureLoader.load('./textures/abc.jpg', function (texture) {
    console.log('texture loaded');
    texture.minFilter = THREE.LinearFilter;
    //mesh[1].material.map = texture;
    var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[1], 10 );
    mesh[1].add( vertexNormalsHelper );
}); */
        scene.add(mesh[1]);

//
var Orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
Orbitcontrols.update();

}

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

// animate
function animate() {
    requestAnimationFrame(animate);
    render();
}

https://jsfiddle.net/simar_aneja/fsmw8znq/6/

在小提琴中，您可以看到牆正在正確構建，並且可以從一開始就增加創建這些索引的頂點和循環。 現在，我想將UV添加到此bufferGeometry中，我嘗試轉換為幾何，然后計算出faceVertexUVs，但這不是正確的方法。 誰能建議我進一步的途徑，我可以只在正面貼上不同的紋理，在頂端貼上不同的紋理。 而且應該這樣一種方式：無論有多少個頂點，Uv都應基於頂點的長度來計算。 我有一些想法，但沒有得到如何使牆的不同側面變得不同的想法。

謝謝

Answer 1

這是我為ya固定的UV包裝盒。 也許您會發現它很有幫助...

我還把您的提琴提成一個片段，您可以在下面運行...

function boxUnwrapUVs(geometry) {
  if (!geometry.boundingBox) geometry.computeBoundingBox();
  var sz = geometry.boundingBox.getSize(new THREE.Vector3());
  var center = geometry.boundingBox.getCenter(new THREE.Vector3())
  var min = geometry.boundingBox.min;
  if (geometry.faceVertexUvs[0].length == 0) {
    for (var i = 0; i < geometry.faces.length; i++) {
      geometry.faceVertexUvs[0].push([new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()]);
    }
  }
  for (var i = 0; i < geometry.faces.length; i++) {
    var face = geometry.faces[i];
    var faceUVs = geometry.faceVertexUvs[0][i]
    var va = geometry.vertices[geometry.faces[i].a]
    var vb = geometry.vertices[geometry.faces[i].b]
    var vc = geometry.vertices[geometry.faces[i].c]
    var vab = new THREE.Vector3().copy(vb).sub(va)
    var vac = new THREE.Vector3().copy(vc).sub(va)
    //now we have 2 vectors to get the cross product of...
    var vcross = new THREE.Vector3().copy(vab).cross(vac);
    //Find the largest axis of the plane normal...
    vcross.set(Math.abs(vcross.x), Math.abs(vcross.y), Math.abs(vcross.z))
    var majorAxis = vcross.x > vcross.y ? (vcross.x > vcross.z ? 'x' : vcross.y > vcross.z ? 'y' : vcross.y > vcross.z) : vcross.y > vcross.z ? 'y' : 'z'
    //Take the other two axis from the largest axis
    var uAxis = majorAxis == 'x' ? 'y' : majorAxis == 'y' ? 'x' : 'x';
    var vAxis = majorAxis == 'x' ? 'z' : majorAxis == 'y' ? 'z' : 'y';
    faceUVs[0].set((va[uAxis] - min[uAxis]) / sz[uAxis], (va[vAxis] - min[vAxis]) / sz[vAxis])
    faceUVs[1].set((vb[uAxis] - min[uAxis]) / sz[uAxis], (vb[vAxis] - min[vAxis]) / sz[vAxis])
    faceUVs[2].set((vc[uAxis] - min[uAxis]) / sz[uAxis], (vc[vAxis] - min[vAxis]) / sz[vAxis])
  }
  geometry.elementsNeedUpdate = geometry.verticesNeedUpdate = true;
}
geometry = new THREE.Geometry().fromBufferGeometry(geometry)
boxUnwrapUVs(geometry)
var mesh = new THREE.Mesh(geometry, material);

 /** * Created by Singh on 7/30/2018. */ var renderer, scene, camera; init(); animate(); function init() { wallsGeometry = function(totalPoints) { var rrnd = (min, max) => (Math.random() * (max - min)) + min var irnd = (rng) => (Math.random() * rng) | 0 function makeRndCanvas() { var canvas = document.createElement('canvas'); canvas.width = canvas.height = 128; var ctx = canvas.getContext('2d'); var srnd = (rng) => (Math.random() - 0.5) * 2 * rng var irnd = (rng) => ((Math.random() * rng) | 0) for (var x = 0; x < canvas.width; x++) { for (var y = 0; y < canvas.width; y++) { ctx.fillStyle = `rgba(${irnd(256)},${irnd(256)},${irnd(256)},1.0)` ctx.fillRect(x, y, 1, 1); } } ctx.fillStyle = '#ffff00' ctx.fillText("WAHOO", 3, 64) return canvas; } function makeRndTexture() { var tex = new THREE.Texture(makeRndCanvas()) tex.minFilter = // THREE.LinearMipMapLinearFilter; tex.magFilter = THREE.NearestFilter; //THREE.LinearFilter; tex.wrapS = tex.wrapT = THREE.RepeatWrapping; //tex.repeat.set(0.01, 0.01); tex.needsUpdate = true; return tex; } var material = new THREE.MeshLambertMaterial({ /*color: 0xff0000,*/ side: THREE.DoubleSide, wireframe: false, map: makeRndTexture() }); var material2 = new THREE.MeshLambertMaterial({ /*color: 0x0044400, */ side: THREE.DoubleSide, wireframe: true }); var geometry = new THREE.BufferGeometry(); var geometry2 = new THREE.BufferGeometry(); var wallHeight = 200; var pointindices = [ 0, 1, 2, 0, 2, 3, //left 5, 4, 7, 5, 7, 6, //right 4, 0, 3, 4, 3, 7, //back 1, 5, 6, 1, 6, 2, //front 2, 6, 7, 2, 7, 3, //top 5, 1, 0, 5, 0, 4, //bottom ]; var pointindices2 = [ 1, 0, 2, 1, 3, 2, //left 4, 5, 7, 4, 6, 7, //right 0, 4, 3, 0, 7, 3, //back 5, 1, 2, 5, 2, 6, //front 6, 2, 7, 6, 3, 7, //top 1, 5, 0, 1, 4, 0, //bottom ]; var tempIndices = []; var tempIndices2 = []; for (var i = 0; i < 4; i++) { for (var j = 0; j < pointindices.length; j++) { tempIndices[pointindices.length * i + j] = 4 * i + pointindices[j]; } } for (var i = 0; i < 4; i++) { for (var j = 0; j < pointindices2.length; j++) { tempIndices2[pointindices2.length * i + j] = 4 * i + pointindices2[j]; } } var tempVerMesh = []; var tempVerMesh2 = []; var indices = new Uint32Array(tempIndices); var pointsArray = { // for testing pointUpper1: new THREE.Vector3(), pointUpper2: new THREE.Vector3(), pointCenter1: new THREE.Vector3(), pointCenter2: new THREE.Vector3(), pointLower1: new THREE.Vector3(), pointLower2: new THREE.Vector3() }; console.log(totalPoints); /*function generateUVs(geometry) { geometry.computeBoundingBox(); var max = geometry.boundingBox.max, min = geometry.boundingBox.min; var offset = new THREE.Vector3(0 - min.x, 0 - min.y); var range = new THREE.Vector3(max.x - min.x, max.y - min.y); var faces = geometry.faces; geometry.faceVertexUvs[0] = []; for (var i = 0; i < faces.length ; i++) { var v1 = geometry.vertices[faces[i].a], v2 = geometry.vertices[faces[i].b], v3 = geometry.vertices[faces[i].c]; geometry.faceVertexUvs[0].push([ new THREE.Vector3((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y), new THREE.Vector3((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y), new THREE.Vector3((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y), ]); } geometry.uvsNeedUpdate = true; return geometry; }*/ for (var i = 0; i < totalPoints.lower.length; i++) { pointsArray.pointCenter1 = totalPoints.center[i]; //pointsArray.pointCenter2 = totalPoints.center[i + 1]; pointsArray.pointLower1 = totalPoints.lower[i]; //pointsArray.pointLower2 = totalPoints.lower[i + 1]; pointsArray.pointUpper1 = totalPoints.upper[i]; //pointsArray.pointUpper2 = totalPoints.upper[i + 1]; tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z); tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y, pointsArray.pointLower1.z); tempVerMesh.push(pointsArray.pointLower1.x, pointsArray.pointLower1.y + wallHeight, pointsArray.pointLower1.z); tempVerMesh.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z); tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y, pointsArray.pointCenter1.z); tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y, pointsArray.pointUpper1.z); tempVerMesh2.push(pointsArray.pointUpper1.x, pointsArray.pointUpper1.y + wallHeight, pointsArray.pointUpper1.z); tempVerMesh2.push(pointsArray.pointCenter1.x, pointsArray.pointCenter1.y + wallHeight, pointsArray.pointCenter1.z); } var vertices = new Float32Array(tempVerMesh); var vertices2 = new Float32Array(tempVerMesh2); //var uvs = new Float32Array(pointUVs); geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); geometry.setIndex(new THREE.BufferAttribute(indices, 1)); //geometry.addAttribute('uv', new THREE.BufferAttribute(uvs, 2)); geometry.computeFaceNormals(); geometry.computeVertexNormals(); console.log(geometry); function boxUnwrapUVs(geometry) { if (!geometry.boundingBox) geometry.computeBoundingBox(); var sz = geometry.boundingBox.getSize(new THREE.Vector3()); var center = geometry.boundingBox.getCenter(new THREE.Vector3()) var min = geometry.boundingBox.min; if (geometry.faceVertexUvs[0].length == 0) { for (var i = 0; i < geometry.faces.length; i++) { geometry.faceVertexUvs[0].push([new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()]); } } for (var i = 0; i < geometry.faces.length; i++) { var face = geometry.faces[i]; var faceUVs = geometry.faceVertexUvs[0][i] var va = geometry.vertices[geometry.faces[i].a] var vb = geometry.vertices[geometry.faces[i].b] var vc = geometry.vertices[geometry.faces[i].c] var vab = new THREE.Vector3().copy(vb).sub(va) var vac = new THREE.Vector3().copy(vc).sub(va) //now we have 2 vectors to get the cross product of... var vcross = new THREE.Vector3().copy(vab).cross(vac); //Find the largest axis of the plane normal... vcross.set(Math.abs(vcross.x), Math.abs(vcross.y), Math.abs(vcross.z)) var majorAxis = vcross.x > vcross.y ? (vcross.x > vcross.z ? 'x' : vcross.y > vcross.z ? 'y' : vcross.y > vcross.z) : vcross.y > vcross.z ? 'y' : 'z' //Take the other two axis from the largest axis var uAxis = majorAxis == 'x' ? 'y' : majorAxis == 'y' ? 'x' : 'x'; var vAxis = majorAxis == 'x' ? 'z' : majorAxis == 'y' ? 'z' : 'y'; faceUVs[0].set((va[uAxis] - min[uAxis]) / sz[uAxis], (va[vAxis] - min[vAxis]) / sz[vAxis]) faceUVs[1].set((vb[uAxis] - min[uAxis]) / sz[uAxis], (vb[vAxis] - min[vAxis]) / sz[vAxis]) faceUVs[2].set((vc[uAxis] - min[uAxis]) / sz[uAxis], (vc[vAxis] - min[vAxis]) / sz[vAxis]) } geometry.elementsNeedUpdate = geometry.verticesNeedUpdate = true; } geometry = new THREE.Geometry().fromBufferGeometry(geometry) boxUnwrapUVs(geometry) geometry = new THREE.BufferGeometry().fromGeometry(geometry) var mesh = new THREE.Mesh(geometry, material); var indices2 = new Uint32Array(tempIndices2); geometry2.addAttribute('position', new THREE.BufferAttribute(vertices2, 3)); geometry2.setIndex(new THREE.BufferAttribute(indices2, 1)); geometry2.computeFaceNormals(); geometry2.computeVertexNormals(); /* var geom = new THREE.Geometry().fromBufferGeometry(geometry2); var temp = generateUVs(geom); geometry2 = new THREE.BufferGeometry().fromGeometry(temp);*/ var mesh2 = new THREE.Mesh(geometry2, material2); //geometry2.addAttribute('uv', new THREE.BufferAttribute(uvs2, 2)); return [mesh, mesh2]; }; camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 400; scene = new THREE.Scene(); var arrow; var rayCaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); var light = new THREE.DirectionalLight(); light.position.set(200, 200, 200) scene.add(light) document.body.appendChild(renderer.domElement); renderer.domElement.addEventListener("mousemove", onMouseMove); var points = { pointUpper1: new THREE.Vector3(-70, 0, -20), pointUpper2: new THREE.Vector3(130, 0, -20), pointCenter1: new THREE.Vector3(-100, 0, 0), pointCenter2: new THREE.Vector3(150, 0, 0), pointLower1: new THREE.Vector3(-70, 0, 20), pointLower2: new THREE.Vector3(130, 0, 20) }; var totalPoints = { center: [new THREE.Vector3(-70, 0, 0), new THREE.Vector3(0, 0, 0), new THREE.Vector3(50, 0, 0), new THREE.Vector3(100, 0, 0), new THREE.Vector3(130, 0, 0)], lower: [new THREE.Vector3(-70, 0, 20), new THREE.Vector3(0, 0, 20), new THREE.Vector3(50, 0, 20), new THREE.Vector3(100, 0, 20), new THREE.Vector3(130, 0, 20)], upper: [new THREE.Vector3(-70, 0, -20), new THREE.Vector3(0, 0, -20), new THREE.Vector3(50, 0, -20), new THREE.Vector3(100, 0, -20), new THREE.Vector3(130, 0, -20)] }; var sphere = new THREE.SphereGeometry(2, 10, 10); function initPoints() { var point1mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff00 })); point1mesh.position.copy(points.pointUpper1); scene.add(point1mesh); var point2mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0x0000ff })); point2mesh.position.copy(points.pointUpper2); scene.add(point2mesh); var point3mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff00 })); point3mesh.position.copy(points.pointCenter1); scene.add(point3mesh); var point4mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0x0000ff })); point4mesh.position.copy(points.pointCenter2); scene.add(point4mesh); var point5mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff00 })); point5mesh.position.copy(points.pointLower1); scene.add(point5mesh); var point6mesh = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0x0000ff })); point6mesh.position.copy(points.pointLower2); scene.add(point6mesh); } initPoints(); var mesh = new wallsGeometry(totalPoints); function createArrow() { var length = 30; arrow = new THREE.ArrowHelper( THREE.Object3D.DefaultUp, new THREE.Vector3(), length, 0xffff00, 1.5 * length, 1.25 * length ); arrow.position.z = 10; scene.add(arrow); } // arrow createArrow(); function updateArrow(object, point, face) { arrow.position.copy(point); var normalMatrix = new THREE.Matrix3().getNormalMatrix(object.matrixWorld); var normal = face.normal.clone().applyMatrix3(normalMatrix).normalize(); arrow.setDirection(normal); } function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; rayCaster.setFromCamera(mouse, camera); var intersects = rayCaster.intersectObject(mesh[0], true); var i, il, intersect; if (intersects[0]) { var face = intersects[0].face; var point = intersects[0].point; var object = intersects[0].object; updateArrow(object, point, face); } } /* var textureLoader = new THREE.TextureLoader(); textureLoader.load('./textures/Capture.PNG', function (texture) { console.log('texture loaded'); texture.minFilter = THREE.LinearFilter; //mesh[0].material.map = texture; var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[0], 10 ); mesh[0].add( vertexNormalsHelper ); }); */ scene.add(mesh[0]); /* textureLoader.load('./textures/abc.jpg', function (texture) { console.log('texture loaded'); texture.minFilter = THREE.LinearFilter; //mesh[1].material.map = texture; var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh[1], 10 ); mesh[1].add( vertexNormalsHelper ); }); */ scene.add(mesh[1]); // var Orbitcontrols = new THREE.OrbitControls(camera, renderer.domElement); Orbitcontrols.update(); } // render function render() { renderer.render(scene, camera); } // animate function animate() { requestAnimationFrame(animate); render(); } 

 <script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>