Threejs系列--4纹理贴图

小猴子喝牛奶

已于 2022-05-07 21:31:13 修改

阅读量1.4k

点赞数 1

分类专栏： threejs 文章标签： javascript 3d 前端游戏 threejs

于 2021-07-09 19:06:29 首次发布

本文链接：https://blog.csdn.net/weixin_45111820/article/details/118612698

版权

threejs 专栏收录该内容

23 篇文章 13 订阅

订阅专栏

Threejs系列--4纹理贴图

序言
添加纹理
完整代码

序言

相信通过前两章的阅读，在项目中你能根据实际情况快速选定需要的几何体与材质。本章将优化这个物体，实质更加真实，加上一些纹理，让其更加细腻。

添加纹理

threejs提供了 TextureLoader，可以使得我们非常方便的添加纹理贴图。

构造函数
TextureLoader() 创建一个新的TextureLoader.

方法
共有方法请参见其基类Loader。
.load ( url : String) : Texture
url — 文件的URL或者路径，也可以为 Data URI.

效果图
在这里插入图片描述
纹理贴图(bg2.jpg)

var texture = new THREE.TextureLoader().load( "./bg2.jpg" );
var material = new THREE.MeshPhongMaterial({
	color: 0xffffff,
	map: texture,
	specular:0xd0c7be,
});

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0; width: 0;}
			body{overflow: hidden;}
		</style>
		<script src="three.js" type="text/javascript" charset="utf-8"></script>
		<script src="OrbitControls.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//创建场景
		var scene = new THREE.Scene();
		scene.background = new THREE.Color(0xbbbbbb);
		scene.position.x = -1;
		scene.position.y = -1;
		
		//创建相机
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		//创建渲染器
		var renderer = new THREE.WebGLRenderer();
		//设置渲染器大小
		renderer.setSize(window.innerWidth, window.innerHeight);
		//将渲染器添加到页面中
		document.body.appendChild(renderer.domElement);
		
		//点光源
		var point = new THREE.PointLight(0xeeeeee);
		point.position.set(400, 200, 300); //点光源位置
		scene.add(point); //点光源添加到场景中
		
		//辅助线开始
		var arrowHelper = new THREE.AxesHelper( 115 );
		scene.add(arrowHelper)
		
		var spotLight = new THREE.SpotLight( 0xeeeeee );
		spotLight.position.set( 0, 380, 0 );
		scene.add( spotLight );
		
		var spotLightHelper = new THREE.SpotLightHelper( spotLight );
		scene.add( spotLightHelper );
		
		
		var helper = new THREE.CameraHelper( camera );
		scene.add( helper );
		//辅助线结束
		
		var texture = new THREE.TextureLoader().load( "./bg2.jpg" );
		//创建立方体
		var geometry = new THREE.TorusKnotBufferGeometry( 10, 4);
		var material = new THREE.MeshPhongMaterial({
			color: 0xffffff,
			map: texture,
			specular:0xd0c7be,
		});
		
		var torusKnot = new THREE.Mesh( geometry, material );
		//创建网格 包含立方体与立方体上的材质
		scene.add(torusKnot)
		
		//可以适当调整相机位置
		camera.position.z = 56;
		//渲染循环、动画循环
		
		function render() {
		  renderer.render(scene,camera);//执行渲染操作
		}
		render();
		var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
		controls.addEventListener('change', render);//监听鼠标、键盘事件
	</script>
</html>

小猴子喝牛奶

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Threejs系列--4纹理贴图

Threejs系列--4纹理贴图序言添加纹理完整代码相信通过前两章的阅读，在项目中你能根据实际情况快速选定需要的几何体与材质。本章将优化这个物体，实质更加真实，加上一些纹理，让其更加细腻。添加纹理treejs提供了 TextureLoader，可以使得我们非常方便的添加纹理贴图。构造函数TextureLoader() 创建一个新的TextureLoader.方法共有方法请参见其基类Loader。.load ( url : String) : Textureurl — 文件的U
复制链接

扫一扫