gpt4 book ai didi

javascript - Threejs,div innerWidth 和innerHeight 设置平面的宽度和高度后会自行改变吗?

转载 作者:太空宇宙 更新时间:2023-11-04 07:30:39 25 4
gpt4 key购买 nike

你好,我有一个疑问。

我正在尝试设置 div 的 innerWidth 和 innerHeight, Canvas 内部的容器,使用以下代码,重要的代码是内部 loader.load 函数,当我们完成飞机加载时执行在页面中。

// 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);
this.scene = scene;

// renderer

this.renderer = new THREE.WebGLRenderer({alpha: true});
this.renderer.setPixelRatio(this.container.devicePixelRatio);
debugger;
this.container.appendChild(this.renderer.domElement);
}.bind(this));





},

animate: function () {

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

}

如您所见,我在 loader.load 异步调用中绑定(bind)了 this,因为我们想访问其中的 this.container,它是类 InitCanvas 中的一个属性。

然后我们在获取刚加载完成的飞机的宽高,用语句:

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

而且我已经看到使用网络调试器它确实将平面的宽度和高度加载到容器中,加载到 div 中:

enter image description here

我们看到 this.container.innerWidth 正在更改为 3128,this.container.innerHeight 正在更改为 1760。

但是,然后我们看到平面渲染后容器 div 是 300x150:

enter image description here

这怎么可能?

此外,为什么我们的网络控制台报告我们:

Uncaught TypeError: Cannot read property 'render' of undefined
at InitCanvas.animate (InitCanvas.js:79)
at animate (logic.js:63)

我认为,这是因为我们确实可以访问 this.renderer 到 loader.load 函数中,因为我们有一个 bind(this),但是在 animate() 函数中,InitCanvas 的类范围已经丢失。

我们如何解决它?

感谢您的帮助!

相关的附加代码:

逻辑.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);

console.log(objects);
}

function onDocumentMouseUp(event) {
mousePressed = false
}


function animate() {


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


}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Prototype: three.js without react.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/styles.css">

<!-- load the libraries and js -->
<script src="js/libs/three.js"></script>

<script src="js/Volume.js"></script>
<script src="js/VolumeSlice.js"></script>
<script src="js/loaders/NRRDLoader.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/gunzip.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script src="js/InitCanvas.js"></script>


</head>

<body>
<div id="info">
<h1>Prototype: three.js without react.js</h1>
</div>

<!-- two canvas -->
<div class="row">
<div class="column" id="original">
</div>

<div class="column" id="segment">

</div>
</div>

<script src="js/logic.js"></script>

</body>
</html>

样式.css

body {
font-family: Monospace;
margin: 0px;
overflow: hidden;
}

#info {
color: rgb(137, 145, 192);
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 5;
display:block;
}

.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

canvas {
width: 200px;
height: 200px;
margin: 100px;
padding: 0px;
position: static; /* fixed or static */
top: 100px;
left: 100px;
}

编辑:我已经完成@Mugen87 告诉我们的操作,它使 Canvas 具有加载模型的宽度和高度。但是我没想到模型会从左上角的 Canvas 部分偏移。它显示在右下角,由于没有滚动条,它隐藏了大部分内容。

enter image description here

enter image description here

我们如何向页面添加滚动条才能清楚地看到 Canvas ?

我还在这里发布了按照@Mugen87 的建议调整 Canvas 大小的代码:

 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;
this.renderer.setSize(this.container.innerWidth, this.container.innerHeight);

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


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

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

最佳答案

只是调整容器的大小不会调整渲染器的大小。您必须调用 renderer.setSize( width, height ); 否则相应 Canvas 的大小保持不变。

此外,devicePixelRatio 是一个window 属性。 this.container.devicePixelRatio 返回 undefined

关于javascript - Threejs,div innerWidth 和innerHeight 设置平面的宽度和高度后会自行改变吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49445460/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com