用6个面构成的立方体作为场景图，发明会涌现变形的征象，css3DRenderer 不会变形，然则不方便增添笔墨，末了采纳scene的背景作为场景，背景是用cubeTextureLoader()加载的。
<button id="btn1" class="btn btn-primary" style="margin-bottom:20px;">切换场景1</button>
<button id="btn2" class="btn btn-warning" style="margin-bottom:20px;">切换场景2</button>
<canvas id="canvas" width="64" height="64" style="display:none;"></canvas>
<div class="canvasWrap" id="canvasWrap" style="margin-bottom:15px;"></div><script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../dist/js/three.js"></script>
<script src="../dist/js/OrbitControls.js"></script> <script>
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肯定要有光芒，不然不显现
</script>