使用three.js画立方体,然后每个面用一张图片标记

使用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方法的使用方法和原理。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值