three加载三维人头部并进行点击喷彩色染料效果代码

代码语言:html

所属分类:三维

代码描述:three加载三维人头部并进行点击喷彩色染料效果代码,可设置喷射面积。

代码标签: three 三维 头部 染料 彩色

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
	<head>
	
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	</head>
	<body>

		<div id="container"></div>
	

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script>


		<script type="importmap">
			{
				"imports": {
					"three": "//repo.bfw.wiki/bfwtool/build/three.module.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js';


			import { GUI } from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/lil-gui.module.min.js';

			import { OrbitControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/OrbitControls.js';
			import { GLTFLoader } from '//repo.bfw.wiki/bfwtool/examples/jsm/loaders/GLTFLoader.js';
			import { DecalGeometry } from '//repo.bfw.wiki/bfwtool/examples/jsm/geometries/DecalGeometry.js';

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

			let renderer, scene, camera, stats;
			let mesh;
			let raycaster;
			let line;

			const intersection = {
				intersects: false,
				point: new THREE.Vector3(),
				normal: new THREE.Vector3()
			};
			const mouse = new THREE.Vector2();
			const intersects = [];

			const textureLoader = new THREE.TextureLoader();
			const decalDiffuse = textureLoader.load( '//repo.bfw.wiki/bfwtool/examples/textures/decal/decal-diffuse.png' );
			const decalNormal = textureLoader.load( '//repo.bfw.wiki/bfwtool/examples/textures/decal/decal-normal.jpg' );

			const decalMaterial = new THREE.MeshPhongMaterial( {
				specular: 0x444444,
				map: decalDiffuse,
				normalMap: decalNormal,
				normalScale: new THREE.Vector2( 1, 1 ),
				shininess: 30,
				transparent: true,
				depthTest: true,
				depthWrite: false,
				polygonOffset: true,
				polygonOffsetFactor: - 4,
				wireframe: false
			} );

			const decals = [];
			let mouseHelper;
			const position = new THREE.Vector3();
			const orientation = new THREE.Euler();
			const size = new THREE.Vector3( 10, 10, 10 );

			const params = {
				minScale: 10,
				maxScale: 20,
				rotate: true,
				clear: function () {

					removeDecals();

				}
			};

			window.add.........完整代码请登录后点击上方下载按钮下载查看

网友评论0