Threejs_贴图

风雨飘摇中的石头

已于 2022-02-07 14:03:20 修改

阅读量991

点赞数

文章标签：贴图 html javascript

于 2022-02-07 14:00:52 首次发布

本文链接：https://blog.csdn.net/ydk001001/article/details/122807544

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>贴图</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
	<script src="http://127.0.0.1:8080/three.js-master/examples/js/controls/OrbitControls.js"></script>
  <!-- <script src="http://127.0.0.1:8080/three.js-master/build/three.js"></script> -->
  <!-- <script src="./three.js-master/build/three.js"></script> -->
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<div id="myapp"></div>

<body>
  <script>
	//1 舞台
	var scene = new THREE.Scene();
	//1.1摄像头
	camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1000);
	//1.2设置渲染器
	render = new THREE.WebGLRenderer({
		antialias: true//抗锯齿
	});
	//1.2.1设置像素
	render.setPixelRatio(window.devicePixelRatio);
	//1.2.2设置尺寸
	render.setSize(window.innerWidth, window.innerHeight)
	
	/****/
	//1.3设置html名称
	var app = document.getElementById("myapp");
	app.appendChild(render.domElement);//渲染器放入规定位置
	
	//2 设置载体	
	var geometry = new THREE.PlaneGeometry(30, 20, 30); //平面
	//var geometry = new THREE.PlaneGeometry(20, 20, 32); //平面
	//2.14质地
	var textureLoader = new THREE.TextureLoader(); // 纹理加载器
	var texture = textureLoader.load('./img/grass.jpg'); 
	//var texture = textureLoader.load('./img/tree.png'); 
	//var texture = textureLoader.load('./img/Earth.png'); 
	// 纹理模式：默认-ClampToEdgeWrapping(夹边包裹)  RepeatWrapping：阵列  镜像阵列：MirroredRepeatWrapping
	texture.wrapS = THREE.RepeatWrapping;//质地.包裹
	texture.wrapT = THREE.RepeatWrapping;
	// u+v方向纹理重复数量
	texture.repeat.set(10,10);//质地重复
	<!-- var material = new THREE.MeshLambertMaterial({ -->
	    <!-- color: 0x00ff00, -->
	<!-- }); -->
	//2.2素材、物质的
	var material = new THREE.MeshBasicMaterial({
		map: texture, // 贴图
		color: 0x00ff00,
	     side: THREE.DoubleSide
	});
	//2. 网格化、啮合化=几何+素材
	var plane = new THREE.Mesh(geometry, material);
	scene.add(plane);//加到场景内

	//3 相机
	camera.position.set(20, 30, 40); //设置相机位置
	camera.lookAt(new THREE.Vector3(0, 0, 0))
	/*********/
	//4  动画 自我调用
	//4.1 函数动画
	function animate(){
		render.render(scene, camera);
		window.requestAnimationFrame(animate);
	}
	//4.2 调用函数
	animate();
</script>

</body>
</html>

风雨飘摇中的石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Threejs_贴图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贴图</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--引入thre..
复制链接

扫一扫