使用three.js画立方体,然后每个面用一张图片标记。多余的不用说,直接上代码。
效果图如下:
var camera, scene, renderer,controls;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 600;
scene = new THREE.Scene();
var a_ = new THREE.TextureLoader().load( '1.png' );
var b_ = new THREE.TextureLoader().load( '2.png' );
var c_ = new THREE.TextureLoader().load( '3.png' );
var d_ = new THREE.TextureLoader().load( '4.png' );
var e_ = new THREE.TextureLoader().load( '5.png' );
var f_ = new THREE.TextureLoader().load( '6.png' );
var geometry = new THREE.BoxGeometry( 250, 250, 250 );
var material_1 = new THREE.MeshBasicMaterial( { map: a_ } );
var material_2 = new THREE.MeshBasicMaterial( { map: b_ } );
var material_3 = new THREE.MeshBasicMaterial( { map: c_ } );
var material_4 = new THREE.MeshBasicMaterial( { map: d_ } );
var material_5 = new THREE.MeshBasicMaterial( { map: e_ } );
var material_6 = new THREE.MeshBasicMaterial( { map: f_ } );
var materials = [];
materials.push(material_1);
materials.push(material_2);
materials.push(material_3);
materials.push(material_4);
materials.push(material_5);
materials.push(material_6);
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.TrackballControls(camera, renderer.domElement);
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
可以用来测试mesh的up属性和lookAt方法的使用方法和原理。