Hiển thị cảnh ở độ phân giải thấp hơn trong ba.js

Question

Tôi đang tìm cách hiển thị khung nhìn ba.js ở độ phân giải một nửa (hoặc kích thước gấp đôi tùy thuộc vào cách bạn nhìn vào nó).

Three.js documentation khẳng định rằng

[Y] ou cũng có thể cung cấp giá trị setSize nhỏ hơn, như window.innerWidth/2 và window.innerHeight/2, một nửa nghị quyết. Điều này không có nghĩa là trò chơi sẽ chỉ lấp đầy một nửa cửa sổ, nhưng trông hơi mờ và co lại.

Kết quả thực tế, tuy nhiên, chế độ xem được chia cho một nửa kích thước.

Điều này jsfiddle cho biết hành vi không mong đợi.

Nhìn vào API có một phương thức setSize và setViewport nhưng không cho phép tôi có chế độ xem được tăng tỷ lệ.

Có một số question and answer ở đây trên SO cung cấp một cách để làm điều đó với CSS, nhưng tôi đang tìm cách không liên quan đến CSS nếu có thể.

Answer 1

Câu trả lời của 2pha là chính xác và đã được triển khai trong ba phút với phương pháp setPixelRatio(), vì vậy bạn có thể viết ít dòng hơn. Mối quan tâm chính với phương pháp này là phù hợp với thuộc tính cửa sổ window.devicePixelRatio như được gợi lại trong nhận xét.

Đây là một tính năng quan trọng để thêm vào bản mẫu của bạn nếu bạn quan tâm đến thiết bị di động/máy tính bảng. Trong tiêu đề HTML của bạn, bạn nên có thẻ meta này: <meta name='viewport' content='width=device-width'/>.

• Nếu bạn không có thẻ này innerWidth và innerHeight của bạn giá trị này sẽ được lớn hơn nhu cầu thiết bị của bạn, tạo ra một bộ đệm khung lớn hơn và có thể làm giảm tốc độ khung hình của bạn.
• Nhưng điều này ngược lại nếu bạn có thẻ này, mà không thiết lập tỷ lệ pixel, bộ đệm khung của bạn sau đó sẽ quá nhỏ ... CSS pixel vs screen pixelstory.

Đó là lý do tại sao bạn thêm dòng này trong javascript

renderer.setPixelRatio(window.devicePixelRatio); 

Nó cần sự setSize được gọi sau:

renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(innerWidth, innerHeight); 

Answer 2

Không chắc chắn nếu có cách nào tốt hơn nhưng bạn có thể chia tỷ lệ phần tử dom ngay sau khi nó được thêm vào.

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth/2, window.innerHeight/2); 
document.body.appendChild(renderer.domElement); 
renderer.domElement.style.width = renderer.domElement.width * 2 + 'px'; 
renderer.domElement.style.height = renderer.domElement.height * 2 + 'px'; 

https://jsfiddle.net/x4p3bcua/4/

Mặc dù điều này vẫn còn làm việc đó thông qua css trong vòng khoảng cách.