three.js内部实例-贴花（包含拖动、旋转、缩放）

最新推荐文章于 2024-06-12 09:59:55 发布

独坐一隅

最新推荐文章于 2024-06-12 09:59:55 发布

阅读量1.1w

点赞数 1

分类专栏： JS 文章标签： three.js 拖动旋转缩放 webgl

本文链接：https://blog.csdn.net/nangongyanya/article/details/52945267

版权

本文介绍了一段使用three.js 82版实现的webgl贴花示例，包括拖动、旋转和缩放功能。通过html代码展示如何在场景中应用和交互操作贴花。

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

以下代码为three.js于github平台上82版内部贴花实例：webgl_decals.html

html代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
	<head>
		<title>WebGL decals</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #fff;
				font-family:Monospace;
				font-size:13px;
				margin: 0px;
				text-align:center;
				overflow: hidden;
			}
			#info{ position: absolute; width: 100%; padding: 5px; }
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
			<strong>Decal Splatter</strong><br />
			Click or tap to shoot.</p>
		</div>

		<script src="js/three.js"></script>
		<script src="js/geometries/DecalGeometry.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script>

		var container = document.getElementById( 'container' );

		var renderer, scene, camera, fov = 45;
		var mesh, decal;
		var raycaster;
		var line;

		var intersection = {
			intersects: false,
			point: new THREE.Vector3(),
			normal: new THREE.Vector3()
		};
		var controls;
		var mouse = new THREE.Vector2();

		var textureLoader = new THREE.TextureLoader();
		var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
		var decalNormal = textureLoader.load( 'textures/decal

最低0.47元/天解锁文章

独坐一隅

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
three.js内部实例-贴花（包含拖动、旋转、缩放）

以下代码为three.js于github平台上82版内部贴花实例：webgl_decals.htmlhtml代码： WebGL decals body { color: #fff; font-family:Monospace; font-size:13px; margin: 0px; text-align:cente
复制链接

扫一扫

专栏目录