Question

我有一个相机放在里面的天空盒。当按下页面顶部的按钮时，框的纹理应该改变。

该框以山纹理开始，城市按钮成功将纹理更改为城市。但是，山峰按钮不会还原纹理。

    var mountain =
        [
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104320/RightMountain.png' ), side: THREE.DoubleSide } ), // Right side
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104320/LeftMountain.png' ), side: THREE.DoubleSide } ), // Left side
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104320/TopMountain.png' ), side: THREE.DoubleSide } ), // Top side
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104320/BottomMountain.png' ), side: THREE.DoubleSide } ), // Bottom side
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104320/FrontMountain.png' ), side: THREE.DoubleSide } ), // Front side
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104314/BackMountain.png' ), side: THREE.DoubleSide } ) // Back side
        ];

var city =
        [
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/FrontCity.png' ), side: THREE.DoubleSide } ), // Front
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/BackCity.png' ), side: THREE.DoubleSide } ), // Back
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/UpCity.png' ), side: THREE.DoubleSide } ), // Up
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/DownCity.png' ), side: THREE.DoubleSide } ), // Down
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/RightCity.png' ), side: THREE.DoubleSide } ), // Right
            new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'https://res.cloudinary.com/egoldman15/image/upload/v1518104616/LeftCity.png' ), side: THREE.DoubleSide } ) // Left
        ];

var cubeMaterials = mountain;

        // Create a MeshFaceMaterial, which allows the cube to have different materials on each face
//Changes the boxes material, color and image structure.


$('#city').click(function() {
  console.log('city');
  cubeMaterials = city;
  drawCube();
});
$('#mountain').click(function() {
  console.log('mountain');
  cubeMaterials = mountain;
  drawCube();
});

function drawCube() {
  var cube = new THREE.Mesh( geometry, cubeMaterials );
  scene.add( cube );
}

drawCube();

完整代码：https://codepen.io/egoldman15/pen/qxqJae

Answer 1

scene.background和立方体纹理的示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
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 cubeTexture1 = new THREE.CubeTextureLoader().load(urls);
cubeTexture1.format = THREE.RGBFormat;
scene.background = cubeTexture1;

var r = "https://threejs.org/examples/textures/cube/Park3Med/";
var urls = [
  r + "px.jpg", r + "nx.jpg",
  r + "py.jpg", r + "ny.jpg",
  r + "pz.jpg", r + "nz.jpg"
];
var cubeTexture2 = new THREE.CubeTextureLoader().load(urls);

btn1.addEventListener("click", function() {
  scene.background = cubeTexture1;
}, false);
btn2.addEventListener("click", function() {
  scene.background = cubeTexture2;
}, false);

var animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div style="position: absolute;">
  <button id="btn1">
    1
  </button>
  <button id="btn2">
    2
  </button>
</div>

关于你的代码。您可以创建一个框，然后通过单击按钮更改其材料，而不是在每次单击时创建新框。

更改纹理的功能只能使用一次

1 个答案: