Three.js: Jendela pada pengubahan ukuran, dan rasio aspek

Dibuat pada 27 Des 2010  ·  13Komentar  ·  Sumber: mrdoob/three.js

Ini satu lagi:
Saya ingin menangani pengubahan ukuran jendela,

window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
    renderer.setSize( window.innerWidth, window.innerHeight );
}

Ini "sebagian besar" berfungsi, kecuali warna partikel disetel ulang menjadi hitam, dan rasio aspek tidak diperbarui, mengubah bola menjadi telur ... dan saya tidak tahu cara memperbaikinya.

Terima kasih :-)

Question

Komentar yang paling membantu

Anda juga perlu memperbarui kamera:

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

}

Semua 13 komentar

Anda juga perlu memperbarui kamera:

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

}

Saya memiliki "div" yang memiliki dimensi dinamis yang diubah ukurannya saat jendela diubah ukurannya ATAU saat elemen lain di dalam halaman disembunyikan. Saat wadah "div" ini diubah ukurannya, saya membutuhkan kanvas untuk mengisi div sepenuhnya. Saya menggunakan $ ('# center-pane'). Width () dan .height () untuk menginisialisasi jaringan, yang dengan benar mengisi div "center" dengan dimensi yang diinginkan, tetapi saya tidak dapat mengubah ukurannya.

Saya secara teoritis dapat menggunakan fungsi yang sama untuk menangani kedua skenario pengubahan ukuran. Sepertinya saya mengalami masalah dengan camera.updateProjectionMatrix () saat fungsi ini dipanggil. Saya memiliki alert () di dalam fungsinya dan mengaktifkan perubahan ukuran, jadi saya hanya bisa mengetahui kamera dan renderernya.

Saya juga membutuhkan semua objek di dalam kanvas agar dapat diklik, yang saya punya fungsinya, tetapi perlu diperbarui, benar?
Saya menggunakan CombinedCamera. (Saya tidak dapat menemukan dokumentasi apapun tentangnya, hanya sebuah contoh);

Ini adalah tata letak yang saya gunakan, kurang lebih: http://layout.jquery-dev.net/demos/simple.html
Saya memerlukan fungsi ubah ukuran untuk mengisi 'ui-center-pane' secara dinamis tanpa tombol ubah ukuran

Terima kasih,
Brent

Maaf, tapi saya tidak mengerti apa masalahnya, bisakah Anda mencoba menyederhanakan penjelasan?

Ok maaf.

  1. Bisakah Anda menjelaskan atau menautkan saya ke dokumentasi CombinedCamera
  2. setelah diubah ukurannya, muncul kesalahan yang mengatakan "tidak ada metode updateProjectionMatrix ()"
  3. Bagaimana, dan apa semua, yang harus saya perbarui setelah pengubahan ukuran. (Juga, bagaimana itu mempengaruhi sinar yang berpotongan untuk menangani peristiwa)

Brent

1 Bisakah Anda menjelaskan atau menautkan saya ke dokumentasi CombinedCamera

Itulah satu-satunya hal yang ada:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 setelah mengubah ukuran, muncul kesalahan yang mengatakan "tidak ada metode updateProjectionMatrix ()"

Saat saya membuka http://layout.jquery-dev.net/demos/simple.html dan mengubah ukuran halaman, saya tidak melihat kesalahan seperti itu. Saya hanya melihat Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Bagaimana, dan apa semua, yang harus saya perbarui setelah mengubah ukuran. (Juga, bagaimana itu mempengaruhi sinar yang berpotongan untuk menangani peristiwa)

Anda harus memperbarui rasio aspek kamera (lebar / tinggi). Dan atur ukuran baru ke perender. Mengenai bagaimana mengubah ukuran memengaruhi ray, harap baca # 988.

camera.aspect = lebar / tinggi; berfungsi dengan baik, tetapi camera.updateProjectionMatrix () membuat kesalahan. Seharusnya tidak ada hubungannya dengan tata letak saya, hanya fungsi onWindowResize ().

Tautan UI-Layout adalah contoh mereka.

Bisakah Anda membagikan kode Anda atau tautan langsung? camera pasti memiliki metode updateProjectionMatrix() .

Ini repositori saya:
https://github.com/BioInfoBrent/BIOINFORMATICS
Mengajukan:
BIOINFORMATICS / js / networkMain.js

Proyek ini sedang terpecah-pecah sekarang, di tengah penulisan ulang tengah semester. Proyek asli dikendalikan oleh satu pernyataan besar "SWITCH", saya sedang dalam proses menyelesaikannya.

Saya akan menyelesaikan arsitekturnya di akhir minggu, yang akan membebaskan banyak waktu untuk mengerjakan sisi proyek THREE.js yang sebenarnya. Saya akan memiliki beberapa pertanyaan lagi dan dapat mengarahkan serta menjelaskan pertanyaan saya dengan lebih jelas dalam satu atau dua hari.

Ah, begitu. CombinedCamera kamera tidak memiliki updateProjectionMatrix() .

@ zz85 : Mungkin lebih baik menambahkan metode updateProjectionMatrix() ke CombinedCamera yang memanggil updateProjectionMatrix() pada cameraO dan cameraP ?

Terima kasih! Aku akan memeriksa ini. Saya memiliki proyek saya di server saya.
Alamat: http://cas-biodb.cas.unt.edu/bionet/dev.html
-Tombol "Jaringan" di bagian atas saat ini adalah satu-satunya bagian yang berfungsi.

Terima kasih!

Berikut ini memecahkannya untuk saya:

camera.aspect = 1;
camera.updateProjectionMatrix ();
renderer.setSize (window.innerWidth, window.innerHeight);

Saya menggunakan versi 66 dan menelepon

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

}

tidak bekerja untuk CombinedCamera . Sebaliknya, saya harus melakukan sesuatu seperti

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

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

}

saya ingin mengubah ukuran glft dalam bereaksi tiga serat

Apakah halaman ini membantu?
0 / 5 - 0 peringkat