0

这可能是一个新手错误，但我坚持了好几个小时，所以我想我会在这里问。我是 three.js 的新手，但是通过论坛我发现了一些很好的网格编辑和管理导入模型的例子，但是在我的代码适应这个例子之后，我现在卡住了。

我想拖动模型的顶点，但是当我尝试单击顶点时，我有<a class='gotoLine' href='#140:42'>140:42</a> Uncaught ReferenceError: points is not defined"

我似乎无法获得var points外部，function object否则我会黑屏。

下一个挑战是将其导出到 GLTF和 3D 打印机。

编辑：我设法改变了顶点，但我的模型不会相应地转换为网格。并且测试我发现我有很多顶点在彼此之上，即使我有

geometry.mergeVertices(); geometry.computeFaceNormals(); geometry.computeVertexNormals();

启用。

这是我现在的代码： https ://jsfiddle.net/felipefsalazar/j9c1L6yr/6/

//SETUP DA TELA
var points, geometry;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//CONTROLE com o MOUSE
var controls = new THREE.OrbitControls(camera, renderer.domElement);

//LUZ
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

//GRID CINZA NA TELA
scene.add(new THREE.GridHelper(100, 100));

//LOAD DO OBJETO
var objLoader = new THREE.OBJLoader();

objLoader.load('https://raw.githubusercontent.com/felipefsalazar/venus/master/venuspeq.obj',


  function(object) {

    child = object.children[0];
    geometry = new THREE.Geometry().fromBufferGeometry(child.geometry);
    geometry.computeFaceNormals();
    geometry.mergeVertices(geometry);
    geometry.computeVertexNormals();
    geometry = new THREE.BufferGeometry().fromGeometry(geometry);

    scene.add(object);

    //MALHA DA ESTATUA
    var plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      wireframe: true,
      color: "blue"
    }));
    scene.add(plane);

    //PONTOS NA ESTÁTUA PARA MEXER
    points = new THREE.Points(geometry, new THREE.PointsMaterial({
      size: 0.25,
      color: "yellow"
    }));
    scene.add(points);


    //MALHA DA ESTATUA (wireframe)
    venuspeq = new THREE.Mesh(geometry, mesh);

    //ROTAÇÃO DO OBJETO
    //object.rotation.x = -Math.PI * 0.5;

    //BOX DE AJUDA DO OBJETO
    //var box = new THREE.Box3().setFromObject(object);
    //var box3Helper = new THREE.Box3Helper(box);
    //scene.add(box3Helper);



  });


var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 0.25;
var mouse = new THREE.Vector2();
var intersects = null;
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var currentIndex = null;
var planePoint = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mousemove", mouseMove, false);
window.addEventListener("mouseup", mouseUp, false);



function mouseDown(event) {
  setRaycaster(event);
  getIndex();
  dragging = true;
    if (currentIndex != null){
        controls.enabled = false;
        }
}

function mouseMove(event) {
  if (dragging && currentIndex !== null) {
    setRaycaster(event);
    raycaster.ray.intersectPlane(plane, planePoint);
    geometry.attributes.position.setXYZ(currentIndex, planePoint.x, planePoint.y, planePoint.z);
    geometry.attributes.position.needsUpdate = true;
  }
}

function mouseUp(event) {
  dragging = false;
  currentIndex = null;
    controls.enabled = true;
}

function getIndex() {
  intersects = raycaster.intersectObject(points);
  if (intersects.length === 0) {
    currentIndex = null;
    return;
  }
  currentIndex = intersects[0].index;
  setPlane(intersects[0].point);
}

function setPlane(point) {
  planeNormal.subVectors(camera.position, point).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, point);
}

function setRaycaster(event) {
  getMouse(event);
  raycaster.setFromCamera(mouse, camera);
}

function getMouse(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}


//RENDER
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

4

1 回答 1

0

您的问题在于 JavaScript 范围。您必须确保它points在整个代码中都可用，而不仅仅是在单个函数中。例如：

function init() {
   var points = 1;
}

// This will not work because points is only available
// inside the init function
init();
console.log(points);

要解决此问题，请在函数外部声明变量，以便将其范围提升一级：

var points;
function init() {
    points = 1;
}

// Now you'll get the desired output of 1
init();
console.log(points);

请参阅此处以获取固定版本。请注意，我必须var points, geometry;在代码的开头声明两者，以便它们在所有函数中都可用：

//SETUP DA TELA
var points, geometry;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//CONTROLE com o MOUSE
var controls = new THREE.OrbitControls(camera, renderer.domElement);

//LUZ
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

//GRID CINZA NA TELA
scene.add(new THREE.GridHelper(100, 100));

//LOAD DO OBJETO
var objLoader = new THREE.OBJLoader();

objLoader.load('https://raw.githubusercontent.com/felipefsalazar/venus/master/venuspeq.obj',


  function(object) {

    child = object.children[0];
    geometry = new THREE.Geometry().fromBufferGeometry(child.geometry);
    geometry.computeFaceNormals();
    //geometry.mergeVertices();
    geometry.computeVertexNormals();
    geometry = new THREE.BufferGeometry().fromGeometry(geometry);

    scene.add(object);

    //MALHA DA ESTATUA
    var plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      wireframe: true,
      color: "blue"
    }));
    scene.add(plane);

    //PONTOS NA ESTÁTUA PARA MEXER
    points = new THREE.Points(geometry, new THREE.PointsMaterial({
      size: 0.15,
      color: "red"
    }));
    scene.add(points);


    //MALHA DA ESTATUA (wireframe)
    //venuspeq = new THREE.Mesh(geometry, mesh);

    //ROTAÇÃO DO OBJETO
    //object.rotation.x = -Math.PI * 0.5;

    //BOX DE AJUDA DO OBJETO
    //var box = new THREE.Box3().setFromObject(object);
    //var box3Helper = new THREE.Box3Helper(box);
    //scene.add(box3Helper);



  });


var raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 0.15;
var mouse = new THREE.Vector2();
var intersects = null;
var plane = new THREE.Plane();
var planeNormal = new THREE.Vector3();
var currentIndex = null;
var planePoint = new THREE.Vector3();
var dragging = false;

window.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mousemove", mouseMove, false);
window.addEventListener("mouseup", mouseUp, false);



function mouseDown(event) {
  setRaycaster(event);
  getIndex();
  dragging = true;
}

function mouseMove(event) {
  if (dragging && currentIndex !== null) {
    setRaycaster(event);
    raycaster.ray.intersectPlane(plane, planePoint);
    geometry.attributes.position.setXYZ(currentIndex, planePoint.x, planePoint.y, planePoint.z);
    geometry.attributes.position.needsUpdate = true;
  }
}

function mouseUp(event) {
  dragging = false;
  currentIndex = null;
}

function getIndex() {
  intersects = raycaster.intersectObject(points);
  if (intersects.length === 0) {
    currentIndex = null;
    return;
  }
  currentIndex = intersects[0].index;
  setPlane(intersects[0].point);
}

function setPlane(point) {
  planeNormal.subVectors(camera.position, point).normalize();
  plane.setFromNormalAndCoplanarPoint(planeNormal, point);
}

function setRaycaster(event) {
  getMouse(event);
  raycaster.setFromCamera(mouse, camera);
}

function getMouse(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}



//RENDER
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

于 2020-08-11T23:34:31.957 回答