threejs 加载两个场景_three.js 场景切换

用6个面组成的立方体作为场景图，发现会出现变形的现象，css3DRenderer 不会变形，但是不方便增加文字，最后采用scene的背景作为场景，背景是用cubeTextureLoader()加载的。

切换场景1

切换场景2

var width, height;

var renderer;

function initRender() {

width = document.getElementById('canvasWrap').clientWidth;

height = document.getElementById('canvasWrap').clientHeight;

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(width, height);

document.getElementById('canvasWrap').appendChild(renderer.domElement);

}

var camera;

function initCamera() {

camera = new THREE.PerspectiveCamera(75, width / height, 1, 1000);

console.log(camera)

camera.position.set(0, 0, 300);

}

var scene;

function initScene() {

scene = new THREE.Scene();

//scene.background = new THREE.TextureLoader().load( '../textures/2294472375_24a3b8ef46_o.jpg' ) //scene不会跟着旋转

scene.background = new THREE.CubeTextureLoader()

.setPath('../dist/textures/cube/Bridge2/').load(

[

'posx.jpg',

'negx.jpg',

'posy.jpg',

'negy.jpg',

'posz.jpg',

'negz.jpg'

]

);

console.log(scene)

}