Xin chào, tôi có một câu hỏi.

Tôi đang cố gắng đặt InnerWidth và InnerHeight của div, một vùng chứa bên trong Canvas, bằng cách sử dụng mã sau, mã quan trọng là hàm Loader.load bên trong, được thực thi trên trang khi chúng tôi tải xong máy bay.

// lớp này xử lý tải và canvas cho một nrrd
// Sử dụng lập trình dựa trên nguyên mẫu: https://javascript.info/class
// Lớp này cần được cải thiện:
// - Chiều rộng và chiều cao của canvas

InitCanvas = function (IdDiv, Filename) {


    this.IdDiv = IdDiv;
    this.Filename = Tên tệp
}

InitCanvas.prototype = {

    hàm tạo: InitCanvas,

    khởi tạo: hàm () {

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

        // điều này nên được thay đổi.
        cửa sổ;
        this.container.innerHeight = 600;
        this.container.innerWidth = 800;

        // Những câu lệnh này nên được thay đổi để cải thiện vị trí hình ảnh
        this.máy ảnh = THREE.PerspectiveCamera mới (60, this.container.innerWidth / this.container.innerHeight, 0,01, 1e10);
        this.máy ảnh.position.z = 300;

        hãy để cảnh = THREE.Scene mới();
        scene.add(this.Camera);

        // ánh sáng

        hãy dirLight = new THREE.DirectionalLight(0xffffff);
        dirLight.position.set(200, 200, 1000).n normalize();

        this.máy ảnh.add(dirLight);
        this.Camera.add(dirLight.target);


        // đọc tập tin

        hãy để trình tải = new THREE.NRRDLoader();
        Loader.load(this.Filename, function (volume) {

            //z mặt phẳng
            đặt sliceZ = Volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));

            cửa sổ;
            this.container.innerWidth = sliceZ.iLength;
            this.container.innerHeight = sliceZ.jLength;

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


            console.log('Slice của chúng ta là: ', sliceZ);

            cảnh.add(sliceZ.mesh);
        this.scene = cảnh;

        // trình kết xuất

        this.renderer = new THREE.WebGLRenderer({alpha: true});
        this.renderer.setPixelRatio(this.container.devicePixelRatio);
        cửa sổ;
        this.container.appendChild(this.renderer.domElement);
        }.bind(this));





    },

    hoạt hình: hàm () {

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

}

Như bạn có thể thấy, tôi đã ràng buộc điều này trong lệnh gọi không đồng bộ Loader.load vì chúng ta muốn truy cập this.container bên trong nó, đây là một thuộc tính trong lớp InitCanvas.

Sau đó ta lấy chiều rộng và chiều cao của máy bay vừa được chất hàng bằng cách sử dụng câu lệnh:

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

Và tôi đã thấy khi sử dụng trình gỡ lỗi web, nó tải chiều rộng và chiều cao của mặt phẳng vào vùng chứa, vào div:

Chúng tôi thấy rằng this.container.innerWidth đang thay đổi thành 3128 và this.container.innerHeight đang thay đổi thành 1760.

Nhưng sau đó chúng ta thấy rằng div vùng chứa được hiển thị phẳng có kích thước 300x150:

Làm thế nào điều này có thể xảy ra?

此外，Tại sao bảng điều khiển web lại báo cáo chúng tôi:

Uncaught TypeError: Không thể đọc thuộc tính 'kết xuất' không xác định
    tại InitCanvas.animate (InitCanvas.js:79)
    tại animate (logic.js:63)

Tôi nghĩ điều này là do chúng ta có quyền truy cập this.renderer vào hàm Loader.load vì chúng ta có liên kết (cái này), nhưng trong hàm animate(), phạm vi lớp của InitCanvas đã bị mất.

Làm thế nào để chúng ta giải quyết nó?

Cảm ơn sự giúp đỡ của bạn!

Mã bổ sung có liên quan:

logic.js

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

// biến toàn cục cho tập lệnh này
hãy để OriginalImg,
    SegmentImg;

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


init();
animate();


// khởi tạo trang
function init() {
    let filename = "models/nrrd/columna01.nrrd"; // thay đổi tập tin nrrd của bạn
    hãy để idDiv = 'bản gốc';
    OriginalImg = initCanvas mới (idDiv, tên tệp);
    OriginalImg.init();
    console.log(OriginalImg);

    filename = "models/nrrd/columnasegmentado01.nrrd"; // thay đổi tệp nrrd của bạn
    idDiv = 'đoạn';
    SegmentImg = new InitCanvas(idDiv, filename);
    SegmentImg.init();
}

hãy để originalCanvas = document.getElementById('origin');
originalCanvas.addEventListener('mousedown', onDocumentMouseDown, false);
originalCanvas.addEventListener('mouseup', onDocumentMouseUp, false);


hàm onDocumentMouseDown(event) {
    mousePressed = true;

    bấmĐếm++;

    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('Vị trí chuột x là: ', mouse.x, 'số lần nhấp chuột là: ', clickCount);
    console.log('Vị trí chuột Y là:', mouse.y);

    raycaster.setFromCamera(mouse.clone(), OriginalImg.Camera);
    var object = raycaster.intersectObjects(OriginalImg.scene.children);

    console.log(đối tượng);
}

hàm onDocumentMouseUp(event) {
    mousePressed = sai
}


function animate() {


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


}   

chỉ mục.html

    <đầu>
        
        
        
        

        
        

        
        
        

        
        
        
        

        


    

    
        

            
Nguyên mẫu: three.js không có Reac.js