Üç.js tarafından otomatik olarak oluşturulan tuvayı stil/konumlandırmak mümkün mü?

Question

Üç.js için bir eğirme 3B küpü ile sonuçlanan çevrimiçi bir eğiticiyi takip ediyorum. Bir komut dosyası içinde aşağıdaki JavaScript kullanmış:

function spin() { 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth/2, window.innerHeight/2); 
    document.body.appendChild(renderer.domElement); 

    var geometry = new THREE.BoxGeometry(1, 1, 1); 
    var material = new THREE.MeshBasicMaterial({ color: 0xffff00}); 
    var cube = new THREE.Mesh(geometry, material); 

    camera.position.z = 5; 
    scene.add(cube); 

    var render = function(){ 
    requestAnimationFrame(render); 

    cube.rotation.x += 0.1; 
    cube.rotation.y += 0.1; 

    renderer.render(scene, camera); 
    }; 

    render(); 
} 

Şu anda, bu siyah bir arka plan üzerinde dönen sarı küp oluşturur. Tuvalin boyutunu değiştirmenin mümkün olduğunu görebiliyorum (renderer.setSize() kullanarak), ancak sayfada yeniden konumlandırmak mümkün mü (veya şeffaf backgroud gibi başka bir stil eklemek)? Örneğin. diğer elemanların etrafına yerleştirin.

Bu üç MB tarafından oluşturulanı kullanmak yerine kendi kanvasımı oluşturmanın ve bu tuvaldeki küpü oluşturmanın mümkün olabileceğini düşündüm, bu mümkün olabilir mi?

Answer 1

Her iki yöntem de CSS (statik stil için) veya JS (dinamik stil değişiklikleri için) kullanılarak mümkündür. Sonunda, sadece bir tuval elemanı ve ona başka bir eleman gibi erişebilirsin.

Böyle Oluşturucu için kendi tuval içinde geçirebilirsiniz:

myCanvasElement elbette eleman başvurusu olduğunu

new THREE.WebGLRenderer({ canvas: myCanvasElement }); 

.