Trong ThreeJS (JavaScript/WebGL) làm cách nào để tạo hình nền tĩnh là một phần của cảnh nhưng thay đổi kích thước để vừa với cửa sổ trình duyệt bên trong đầy đủ chính xác? Nó hoạt động khi tôi sử dụng CSS nhưng sau đó hình nền sẽ không hiển thị khi thực hiện "ảnh chụp màn hình" qua renderer.domElement.toDataURL ('image/png'), mà tôi muốn. Cảm ơn!ThreeJS: Tạo hình nền khớp chính xác với cửa sổ?
Bạn có thể sử dụng cảnh nền riêng để hiển thị hình nền.
var bg = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2, 0),
new THREE.MeshBasicMaterial({map: backgroundTexture})
);
// The bg plane shouldn't care about the z-buffer.
bg.material.depthTest = false;
bg.material.depthWrite = false;
var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
bgScene.add(bgCam);
bgScene.add(bg);
Sau đó, trong vòng kết xuất, hãy vẽ bgScene trước cảnh thực của bạn.
renderer.autoClear = false;
renderer.clear();
renderer.render(bgScene, bgCam);
renderer.render(scene, cam);
Cảm ơn rất nhiều, tôi sẽ cố gắng! –
không hoạt động với tôi, đang sử dụng 'OBJMTLLode'r, mà không làm việc này tốt, những gì giả sử để làm cho' OBJMTLLoder' và 'OBJLoder' ??? –
yep cuối cùng nó đã hoạt động .... –
Nó không phải là rõ ràng đối với tôi nếu bạn đang cố gắng để làm một người xem toàn cảnh hoặc một cái gì đó như thế ...
Nếu đó là mục tiêu của bạn, đây là một câu trả lời tôi đã giải quyết vấn đề của chèn một hình ảnh equirectangular đến lĩnh vực render (có thể được điều khiển bằng chuột và/hoặc deviceOrientation [gia tốc trong điện thoại thông minh]):
bạn sẽ camera được tĩnh tại hiện trường, hoặc nó sẽ có thể di chuyển ? Bạn đã từng nghĩ đến việc cố tạo skybox chưa? –
Loại trình kết xuất nào bạn sử dụng? –
Cory, tôi hiện có một camera tĩnh. Tôi đang đặt một hộp kết cấu ở mặt sau của cảnh, nhưng không biết kích thước nào để cho hộp chính xác lấp đầy màn hình với kết cấu của nó. Danny, tôi đang sử dụng WebGLRenderer. Cảm ơn! –