Question

我是javascript和three.js的新手，我正在尝试为这个凳子的框架制作一个“铬材料”我已经加载了。从我所读到的，我需要一个立方相机来创造一个反射的幻觉。经过几天的网上搜索，我不能为我的生活弄清楚为什么我不能让它工作。它只是将框架渲染为黑色（并且座椅是黑色的，但这是一个单独的问题）。任何人都可以帮忙吗？

//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

我尽力帮助你，因为我在你的场景中发现了很多错误。

如果你将一个对象添加到object3d中，你不必将它添加到场景中，当你添加barStool时，你也添加了所有的孩子。

在js加载后调用渲染函数是不必要的，当你将对象放入场景时，它将自动渲染。

如果你想用立方体相机添加反射你必须渲染它，在渲染循环中你必须插入以下行来隐藏chrome对象以更新世界反射贴图：

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);

我建议你从一个简单的场景开始，检查它是否正确渲染然后再添加新功能......一步到位......

立方相机无法正常工作

1 个答案: