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

}

var light;

function initLight() {

//scene.add(new THREE.AmbientLight(0x404040));

scene.add(new THREE.AmbientLight(0xffffff));

light = new THREE.DirectionalLight(0xffffff);

//light.position.set(1,1,1);

light.position.set(0, 0, 50);

scene.add(light);

}

var text = "first text";

function showText() {

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

ctx.canvas.width = 256;

const x = 0;

const y = 32;

ctx.fillStyle = "red";

ctx.font = "30px arial";

ctx.textAlign = "left";

ctx.textBaseline = "middle";

ctx.fillText(text, x, y)

}

var sprite

function showSprite() {

showText()

const canvasTexture = new THREE.CanvasTexture(

document.querySelector("#canvas")

)

//canvasTexture.needsUpdate = true; //注意这句不能少

const spritMaterial = new THREE.SpriteMaterial({

map: canvasTexture

})

sprite = new THREE.Sprite(spritMaterial)

sprite.position.set(-380, 100, 0);

//精灵的默认大小很小估计是[1,1,1]

sprite.scale.set(0.64 * 256, 0.64 * 64, 1);

scene.add(sprite)

}

function initModel() {

var texture1 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/posx.jpg')

var texture2 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/negx.jpg')

var texture3 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/posy.jpg')

var texture4 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/negy.jpg')

var texture5 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/posz.jpg')

var texture6 = new THREE.TextureLoader().load('../dist/textures/cube/Bridge2/negz.jpg')

var materialArr = [

//纹理对象赋值给6个材质对象

new THREE.MeshBasicMaterial({ map: texture1, side: THREE.DoubleSide }),

new THREE.MeshBasicMaterial({ map: texture2, side: THREE.DoubleSide }),

new THREE.MeshBasicMaterial({ map: texture3, side: THREE.DoubleSide }),

new THREE.MeshBasicMaterial({ map: texture4, side: THREE.DoubleSide }),

new THREE.MeshBasicMaterial({ map: texture5, side: THREE.DoubleSide }),

new THREE.MeshBasicMaterial({ map: texture6, side: THREE.DoubleSide })

];

var boxGeometry = new THREE.BoxGeometry(200, 200, 200, 100, 100, 100);

//boxGeometry.scale( -1, 1, 1 );

var cube = new THREE.Mesh(boxGeometry, materialArr);

// var cube = new THREE.Mesh(new THREE.SphereGeometry(50, 180, 120), material)

//new THREE.SphereGeometry(3, 18, 12)

scene.add(cube);

}

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放

var controls;

function initControls() {

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

// 如果使用animate方法时，将此函数删除

//controls.addEventListener( 'change', render );

// 使动画循环使用时阻尼或自转 意思是否有惯性

controls.enableDamping = true;

//动态阻尼系数 就是鼠标拖拽旋转灵敏度

//controls.dampingFactor = 0.25;

//是否可以缩放

controls.enableZoom = true;

//是否自动旋转

controls.autoRotate = false;

//设置相机距离原点的最远距离

//controls.minDistance = 50;

//设置相机距离原点的最远距离

//controls.maxDistance =200;

//是否开启右键拖拽

controls.enablePan = true;

}

function render() {

renderer.render(scene, camera);

}

//窗口变动触发的函数

function onWindowResize() {

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

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

camera.aspect = width / height;

camera.updateProjectionMatrix();

render();

renderer.setSize(width, height);

}

function animate() {

//更新控制器

controls.update();

render();

requestAnimationFrame(animate);

}

function draw() {

initRender();

initScene();

initCamera();

//initLight()

showSprite();

initModel();

initControls();

animate();

window.onresize = onWindowResize;

}

var btn = document.getElementById("btn1");

btn.onclick = function() {

console.log(scene)

//scene.background = new THREE.Color( 0xff0000 )

scene.background = new THREE.CubeTextureLoader()

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

[

'posx.jpg',

'negx.jpg',

'posy.jpg',

'negy.jpg',

'posz.jpg',

'negz.jpg'

]

);

}

var btn = document.getElementById("btn2");

btn.onclick = function() {

console.log(scene)

//scene.background = new THREE.Color( 0xff0000 )

scene.background = new THREE.CubeTextureLoader()

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

[

'posx.jpg',

'negx.jpg',

'posy.jpg',

'negy.jpg',

'posz.jpg',

'negz.jpg'

]

);

}

//MeshFaceMaterial 不加灯光会不显示,MeshBasicMaterial可以不用光线，MeshPhongMaterial一定要有光线，否则不显示