Cube Camera funktioniert nicht

Question

Ich bin neu bei Javascript und three.js und versuche ein "Chrom-Material" für den Rahmen dieses Hockers zu machen, den ich geladen habe. Nach dem, was ich gelesen habe, brauche ich eine Würfelkamera, um die Illusion einer Reflexion zu erzeugen. Nach Tagen der Suche online kann ich nicht für das Leben von mir herausfinden, warum ich es nicht zur Arbeit bringen kann. Es macht nur den Rahmen schwarz (und der Sitz ist schwarz, aber das ist ein separates Problem). Kann mir jemand helfen?

//webGL 

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

camera.position.set(0, 16, 25); 
camera.rotation.x += -0.32; 

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

cubeCamera = new THREE.CubeCamera(1, 1000, 256); // parameters: near, far, resolution 
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter 
scene.add(cubeCamera); 

///LOADERS 
var loadTexture = new THREE.TextureLoader(); 
var loaderJs = new THREE.JSONLoader(); 


///TEXTURES 
var skyTexture = loadTexture.load("textures/background.jpg"); 
var seatTexture = loadTexture.load("textures/Maharam_Mister_Notice_Diffuse.jpg"); 

///MATERIALS 
var skyMaterial = new THREE.MeshBasicMaterial({ 
    side: THREE.DoubleSide, 
    map: skyTexture 
}); 
var frameMaterial = new THREE.MeshLambertMaterial({ 
    //envMap: cubeCamera.renderTarget, 
    color: 0xffffff 
}); 
var seatMaterial = new THREE.MeshLambertMaterial({ 
     map: seatTexture 
}); 


///GEOMETRY and MESHES 
var frameGeo; 

var skyGeo = new THREE.SphereGeometry(30, 30, 30); 
var skySphere = new THREE.Mesh(skyGeo, skyMaterial); 
scene.add(skySphere); 

loaderJs.load("models/stoolFrame.js", function(){ 
    frameGeo = new THREE.Mesh(frameGeo, frameMaterial); 
    frameGeo.scale.set(.5, .5, .5); 
    barStool.add(frameGeo); 
}); 

loaderJs.load("models/stoolSeat.js", function (seatGeo){ 
    seatGeo = new THREE.Mesh(seatGeo, seatMaterial); 
    seatGeo.scale.set(.5, .5, .5); 
    barStool.add(seatGeo); 
}); 


var barStool = new THREE.Object3D(); 
scene.add(barStool); 

    var render = function() { 

     requestAnimationFrame(render); 
     barStool.rotation.y += 0.01; 

     frameGeo.visible = false; 
     cubeCamera.position.copy(frameGeo.position); 
     cubeCamera.updateCubeMap(renderer, scene); 
     frameGeo.visible = true; 


     renderer.render(scene, camera); 
    }; 



render(); 

Answer 1

ich versuche, Ihnen zu helfen, weil ich viele Fehler in der Szene zu sehen.

, wenn Sie ein Objekt in object3d hinzufügen Sie müssen es in Szene nicht hinzufügen, wenn Sie Barstuhl hinzufügen Sie fügen auch alle Kind.

Der Aufruf der Renderfunktion nach js load ist nicht notwendig, wenn Sie das Objekt in die Szene einfügen, wird es automatisch gerendert.

, wenn Sie eine Reflexion mit cubecamera hinzufügen möchten Sie es machen müssen, in der Schleife machen, müssen Sie die folgende Zeile einzufügen, die das Chrom Objekt für die Aktualisierung der Karte der Welt, Reflexion zu verbergen:

requestAnimationFrame(render); 
barStool.rotation.y += 0.01; 

frameGeo.visible=false; 
cubeCamera.position.copy(frameGeo.position); 
cubeCamera.updateCubeMap(renderer, scene); 
frameGeo.visible = true; 

renderer.render(scene, camera); 

I Ich schlage vor, dass Sie mit einer einfachen Szene beginnen, überprüfen Sie, ob es richtig gerendert ist und fügen Sie dann neue Funktion ... einen Schritt für die Zeit ...