javascript - Threejs，向场景添加点但看不到它们

Question

您好，我有一个疑问:

我研究过:

https://threejs.org/docs/#api/materials/PointsMaterial

我已经调整了该示例以与我现有的代码一起使用。

目的是在我们在点击位置加载的模型顶部渲染点。

这里我们有代码，重要的部分是onDocumentMouseDown()，文件，logic.js:

if (!Detector.webgl) Detector.addGetWebGLMessage();

// global variables for this scripts
let OriginalImg,
    SegmentImg;

var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var mousePressed = false;
var clickCount = 0;


init();
animate();


// initilize the page
function init() {
    let filename = "models/nrrd/columna01.nrrd"; // change your nrrd file
    let idDiv = 'original';
    OriginalImg = new InitCanvas(idDiv, filename);
    OriginalImg.init();
    console.log(OriginalImg);

    filename = "models/nrrd/columnasegmentado01.nrrd"; // change your nrrd file
    idDiv = 'segment';
    SegmentImg = new InitCanvas(idDiv, filename);
    SegmentImg.init();
}

let originalCanvas = document.getElementById('original');
originalCanvas.addEventListener('mousedown', onDocumentMouseDown, false);
originalCanvas.addEventListener('mouseup', onDocumentMouseUp, false);


function onDocumentMouseDown(event) {
    mousePressed = true;

    clickCount++;

    mouse.x = ( ( event.clientX - OriginalImg.renderer.domElement.offsetLeft ) / OriginalImg.renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = -( ( event.clientY - OriginalImg.renderer.domElement.offsetTop ) / OriginalImg.renderer.domElement.clientHeight ) * 2 + 1

    console.log('Mouse x position is: ', mouse.x, 'the click number was: ', clickCount);
    console.log('Mouse Y position is: ', mouse.y);

    raycaster.setFromCamera(mouse.clone(), OriginalImg.camera);
    var objects = raycaster.intersectObjects(OriginalImg.scene.children);

    var pointGeometry = new THREE.Geometry();


    var position = new THREE.Vector3();
    position.x = objects[0].point.x;
    position.y = objects[0].point.y;
    position.z = objects[0].point.z;

    pointGeometry.vertices.push(position);


    var pointMaterial = new THREE.PointsMaterial({color: 0x888888});

    var point = new THREE.Points(pointGeometry, pointMaterial);

    OriginalImg.scene.add(point);

    console.log(objects);
}

function onDocumentMouseUp(event) {
    mousePressed = false
}


function animate() {


    requestAnimationFrame(animate);
    OriginalImg.animate();
    SegmentImg.animate();


}   

我们确实将点添加到场景中，但实际上它们不渲染，不显示，我想知道为什么？:

正如您在图像中看到的那样，我们看到光线转换器拦截了那些新创建的点，但是不会绘制它们。

我想知道它们是否太小，或者只是颜色将它们隐藏在背景中。

你能帮我吗？

附加代码:

// this class handles the load and the canva for a nrrd
// Using programming based on prototype: https://javascript.info/class
// This class should be improved:
//   - Canvas Width and height

InitCanvas = function (IdDiv, Filename) {


    this.IdDiv = IdDiv;
    this.Filename = Filename
}

InitCanvas.prototype = {

    constructor: InitCanvas,

    init: function () {

        this.container = document.getElementById(this.IdDiv);

        // this should be changed.
        debugger;
        this.container.innerHeight = 600;
        this.container.innerWidth = 800;

        //These statenments should be changed to improve the image position
        this.camera = new THREE.PerspectiveCamera(60, this.container.innerWidth / this.container.innerHeight, 0.01, 1e10);
        this.camera.position.z = 300;

        let scene = new THREE.Scene();
        scene.add(this.camera);

        // light

        let dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(200, 200, 1000).normalize();

        this.camera.add(dirLight);
        this.camera.add(dirLight.target);


        // read file

        let loader = new THREE.NRRDLoader();
        loader.load(this.Filename, function (volume) {

            //z plane
            let sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));

            debugger;
            this.container.innerWidth = sliceZ.iLength;
            this.container.innerHeight = sliceZ.jLength;

            sliceZ.mesh.material.color.setRGB(0,1,1);


            console.log('Our slice is: ', sliceZ);

            scene.add(sliceZ.mesh);
        }.bind(this));


        this.scene = scene;

        // renderer

        this.renderer = new THREE.WebGLRenderer({alpha: true});
        this.renderer.setPixelRatio(this.container.devicePixelRatio);
        debugger;
        this.renderer.setSize(this.container.innerWidth, this.container.innerHeight);

        // add canvas in container
        this.container.appendChild(this.renderer.domElement);

    },

    animate: function () {

        this.renderer.render(this.scene, this.camera);
    }

}

我想知道磅的大小，因为如果我们看到这个例子，它们是用 0.05 的大小制成的:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_raycasting_points.html

在示例中，我们看到相机距离生成的点相当远，并且它们是可见的:

https://threejs.org/examples/webgl_interactive_raycasting_points.html

你觉得怎么样？

Answer 1

您可以将 THREE.BufferGeometry() 与 .setDrawRange() 一起使用:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 5, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(3, 32, 24), new THREE.MeshBasicMaterial({
  wireframe: true,
  color: "red"
}));
scene.add(mesh);

var idx = 0;
var maxIdx = 10;

var points = [];
for (let i = 0; i < maxIdx; i++) {
  points.push(new THREE.Vector3());
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
geometry.setDrawRange(0, idx);

var points = new THREE.Points(geometry, new THREE.PointsMaterial({
  size: 0.125,
  color: "yellow"
}));
scene.add(points);

window.addEventListener("mousemove", onMouseMove, false);
window.addEventListener("mousedown", onMouseDown, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];

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

function onMouseDown(event) {
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(mesh);
  if (intersects.length === 0) return;

  if (idx == maxIdx) return;

  let p = intersects[0].point;
  geometry.attributes.position.setXYZ(idx, p.x, p.y, p.z);
  geometry.attributes.position.needsUpdate = true;
  idx++;
  geometry.setDrawRange(0, idx);
}

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>