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

代码语言：html

所属分类：三维

代码描述：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.addEventListener( 'load', init );

			function init() {

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				stats = new Stats();
				container.appendChild( stats.dom );

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 120;

				const controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 50;
				controls.maxDistance = 200;

				scene.add( new THREE.AmbientLight( 0x443333 ) );

				const dirLight1 = new THREE.DirectionalLight( 0xffddcc, 1 );
				dirLight1.position.set( 1, 0.75, 0.5 );
				scene.add( dirLight1 );

				const dirLight2 = new THREE.DirectionalLight( 0xccccff, 1 );
				dirLight2.position.set( - 1, 0.75, - 0.5 );
				scene.add( dirLight2 );

				const geometry = new THREE.BufferGeometry();
				geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );

				line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
				scene.add( line );

				loadLeePerrySmith();

				raycaster = new THREE.Raycaster();

				mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ).........完整代码请登录后点击上方下载按钮下载查看