-1

我有一个 ThreeJS 场景，我想提供在天空盒中以不同模式（有或没有纹理）查看所有模型的选项。我使用了两种函数“getSkyTexture”和“getSkyColor”。它应该单独工作，但首先，我在再次调用getSkyColor函数my background sky color change后调用getSkyTexture函数，我调用的不是工作纹理。因此我重置/删除了我的天空盒贴图材质。怎么能做到这一点？my background sky texture changegetskyTexture

function getSkyTexture(id, objMaterial){ //here objMaterial Texture image

        console.log('sky texture');

//      skyMaterial.map = null;
//      skyMaterial.needsUpdate = true;

//      skyBox.material.map = null;
//      skyBox.material.needsUpdate = true;

        var imagePrefix = objMaterial;
        var directions  = ["xpos","xneg","ypos","yneg","zpos","zneg"];
        var imageSuffix = ".png";

         materialArray = [];
         for (var i = 0; i < 6; i++)
         materialArray.push( new THREE.MeshBasicMaterial({
           map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
           side: THREE.BackSide /*depthWrite: false, fog: false*/
          }));

         var skyGeometry = new THREE.CubeGeometry( 1000, 1000, 1000);
         skyMaterial = new THREE.MeshFaceMaterial( materialArray );
         skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
         scene3D.add( skyBox );

    }

    function getSkyColor(id, objMaterial){   //here objMaterial color

        console.log('sky color');

/*Here remove/reset my skybox map texture.but not working*/     
//      renderer3D.autoClear = false;

//      materialArray.map =null;
//      materialArray.needsUpdate = true;       

//      skyBox.map = null;
//      skyBox.needsUpdate = true;

//      skyBox.material.map = null;
//      skyBox.material.needsUpdate = true;

//      skyMaterial.map = null;
//      skyMaterial.needsUpdate = true;

//      scene3D.remove(skyMaterial);

//      skyBox.MeshFaceMaterial = null;
//      skyBox.needsUpdate = true;

//      skyMaterial = objMaterial;



        var skyGeometry = new THREE.CubeGeometry( 1000, 1000,1000);
        skyMaterial = new THREE.MeshBasicMaterial({color: objMaterial, side: THREE.BackSide});
        skyBox = new THREE.Mesh( skyGeometry, skyMaterial);
        scene3D.add(skyBox);

        //renderer3D.setClearColor(objMaterial);

    }
4

1 回答 1

1

下面是在颜色和立方体纹理之间切换场景背景的示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("purple");
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var path = "https://threejs.org/examples/textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
  path + 'px' + format, path + 'nx' + format,
  path + 'py' + format, path + 'ny' + format,
  path + 'pz' + format, path + 'nz' + format
];
var cubeTexture = new THREE.CubeTextureLoader().load(urls);

var colorTexture = new THREE.Color("purple");

var switcher = true;
btnSwitch.addEventListener("click", function() {
  scene.background = switcher === true ? cubeTexture : colorTexture;
  switcher = !switcher;
}, false);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="btnSwitch" style="position: absolute;">switch</button>

于 2018-04-20T08:53:55.380 回答