查看场景切换效果
用 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>