用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一定要有光线，否则不显示
