three.js(5)：纹理贴图和遇到的问题

最新推荐文章于 2024-06-02 17:13:03 发布

Spider_man_

最新推荐文章于 2024-06-02 17:13:03 发布

阅读量2.4k

点赞数 2

分类专栏： WebGL

本文链接：https://blog.csdn.net/chengmo123/article/details/108254941

版权

本文介绍了在使用three.js进行纹理贴图时遇到的常见问题及解决方案。问题包括：黑色纹理显示，其可能原因一是未在服务器环境下运行，二是TextureLoader加载纹理的异步性质。解决方法包括使用本地服务器（如node.js）和确保添加window.requestAnimationFrame(this.render.bind(this))以确保渲染在纹理加载后执行。同时提供了相关参考链接以帮助开发者深入理解。

摘要由CSDN通过智能技术生成

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正方体贴图</title>
		<style>
			.body{
				margin: 0;
				overflow: hidden;
				
			}
		</style>
	</head>
	<body>
	</body>
	<script src="js/three.js"></script>
	<script>
		var scene=new THREE.Scene();
		
		/*相机设置*/
		var width=window.innerWidth;
		var height=window.innerHeight;
		var k=width/height;
		var s=100;
		var camera=new THREE.OrthographicCamera(-k*s,k*s,s,-s,1,1000);
		camera.position.set(200,300,200);
		camera.lookAt(scene.position);
		
		// /*光源*/
		// //点光源
		var pointLight=new THREE.PointLight(0x0000FF);
		pointLight.position.set(300,400,300);
		scene.add(pointLight);
		// //环境光
		var envLight=new THREE.AmbientLight(0xFAFAD2)
		scene.add(envLight);
		
		/*几何体*/
		var texture = new THREE.TextureLoader().load( 'crate.jpg' );
		var box_

最低0.47元/天解锁文章

Spider_man_

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
three.js(5)：纹理贴图和遇到的问题

完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>正方体贴图</title> <style> .body{ margin: 0; overflow: hidden; } </style> </head> <body> </body>
复制链接

扫一扫