实现3D 场景——three.js学习篇五之正方体贴图

最新推荐文章于 2024-02-08 23:01:47 发布

hello big_bear

最新推荐文章于 2024-02-08 23:01:47 发布

阅读量1.4k

点赞数 2

分类专栏： three.js 文章标签：贴图 html 前端 three.js 前端可视化

本文链接：https://blog.csdn.net/big_beer/article/details/120347755

版权

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

在上一篇中讲到如何在场景中放入多个物体。那么我们来设想一下，如果在放一个大的物体里面包裹着一个小的物体会怎么样呢？？？然后再给物体的各个面贴上图片会变成什么样呢？？？

学习内容：

1、物体贴图
2、鼠标控制
3、自动旋转

代码：

<!DOCTYPE html>
<html>
<head>
    <title>贴图</title>
    <style type="text/css">
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
	<div id="app"></div>
<script src="./three.js-dev/build/three.js"></script>
<script src="./three.js-dev/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript"  >
	/*
	创建场景
	*/
	var scene = new THREE.Scene();
	var geometry = new THREE.BoxGeometry( 10, 10, 10 );//创建一个长方体几何对象
	var geometry2 = new THREE.BoxGeometry( 5000000, 5000000, 5000000 );//创建一个长方体几何对象
	
	function loadtexture(url){
		var loder = new THREE.TextureLoader();
		var texture = loder.load(url)
		var basicMaterial = new THREE.MeshBasicMaterial({
			map:texture,
			side:THREE.DoubleSide
			// 前面FrontSide  背面：BackSide 双面：DoubleSide
		})
		return basicMaterial //这个就是图片所造的一个面的材料
	}
	let ary = [
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/33d0ee8b-1d81-4a47-8935-d05393766f30.jpg')
	];//按前、后、上、下、左、右的顺序放图片
	let ary2 = [
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg'),
		loadtexture('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/f3790b7e-485e-4ceb-bda7-7e3b44462357.jpg')
	];//按前、后、上、下、左、右的顺序放图片
	var material = new THREE.MultiMaterial(ary);//因为每个面都贴图片，所以参数是一个数组
	var material2 = new THREE.MultiMaterial(ary2);//因为每个面都贴图片，所以参数是一个数组
	
	var mesh = new THREE.Mesh(geometry,material);//网格模型对象
	scene.add(mesh);//mesh添加到场景中
	var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
	scene.add(mesh2); //网格模型添加到场景中
	/*
	相机设置
	*/
   var width = window.innerWidth;//窗口宽度
   var height = window.innerHeight;//窗口高度
   var k = width/height;
   var s = 200000000;//三维场景显示范围控制系数，系数越大，显示范围越大
   var camera = new THREE.PerspectiveCamera( 75, k, 1,s );
   //var camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );
   camera.position.set(30,30,30);//设置相机位置
   camera.lookAt(scene.position);//设置相机方向
   
	/*
	渲染器对象
	*/
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	//renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
	var app = document.getElementById('app')
	app.appendChild( renderer.domElement );
	
	 function render(){	
	 	renderer.render(scene,camera)
	 }//封装一个渲染函数
	
	//设置计时器是防止图片未加载完就执行渲染，图片加载是异步的，如果你注释了这个setTimeout发现没变化，是因为你在自动旋转动画哪里进行了循环的渲染。
	setTimeout(()=>{
		render();
	},100)

	var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控制对象，把相机作为参数。
	
	controls.addEventListener('change',render);//监听鼠标事件，触发渲染函数。
		
		/*
		物体旋转动画函数
		*/
		var animate = function () {
			requestAnimationFrame( animate );
			
			//scene.rotation.x += 0.001;
			scene.rotation.y += 0.001;
			
			renderer.render( scene, camera );
		};
		animate();

</script>
</body>
</html>

效果图：

在这里插入图片描述

项目地址：点击跳转

总结：

1、物体贴图的重点代码是下图：
在这里插入图片描述
1、其中比较重要的是：side:THREE.DoubleSide是指物体里外都贴上图片，如果不写这个属性，默认的话是只贴外面的。
2、然后是六张图片的顺序是按前、后、上、下、左、右的顺序放图片。

hello big_bear

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现3D 场景——three.js学习篇五之正方体贴图

学习目标：在上一篇中讲到如何在场景中放入多个物体。那么我们来设想一下，如果在放一个大的物体里面包裹着一个小的物体会怎么样呢？？？然后再给物体的各个面贴上图片会变成什么样呢？？？学习内容：1、物体贴图2、鼠标控制3、自动旋转代码：<!DOCTYPE html><html><head> <title>贴图</title> <style type="text/css"> body
复制链接

扫一扫

专栏目录