master

分支 (1)

管理

管理

master

threejs-project
/
case-048.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Threejs实现物理效果之重力和摩擦</title>
		<meta charset="utf-8">
		<script type="text/javascript" src="libs/statistics.js"></script>
		<script type="text/javascript" src="libs/steak.js"></script>
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="importmap">
			{
				"imports": {
					"three": "./libs/jsm/three.module.js"
				}
			}
		</script>
		<script src="libs/js/ammo.wasm.js"></script>
		<script type="module">
			import * as THREE from 'three';

			import {
				OrbitControls
			} from './libs/jsm/OrbitControls.js';

			import {
				GLTFLoader
			} from './libs/jsm/GLTFLoader.js';

			import {
				RGBELoader
			} from './libs/jsm/RGBELoader.js';

			import {
				TWEEN
			} from './libs/jsm/tween.module.min.js';

			import {
				GUI
			} from './libs/jsm/lil-gui.module.min.js';

			import {
				AmmoPhysics
			} from './libs/jsm/physics/AmmoPhysics.js';

			let camera, scene, renderer, stats, gui;

			let labelRenderer;

			let grid;
			let controls;
			let carModel;

			const wheels = [];
			const doors = [];
			let bodyMaterial, detailsMaterial, glassMaterial;
			let physics, position;
			let boxes, spheres, floor;

			async function init() {

				physics = await AmmoPhysics();
				const container = document.getElementById('container');
				position = new THREE.Vector3();

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

				window.addEventListener('resize', onWindowResize);

				camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
				camera.position.set(4.25, 1.4, -4.5);

				controls = new OrbitControls(camera, container);
				controls.enableDamping = true;
				controls.maxDistance = 9;
				controls.target.set(0, 0.5, 0);

				scene = new THREE.Scene();
				scene.background = new THREE.Color(0x333333);
				scene.fog = new THREE.Fog(0x333333, 10, 15);

				var ambientLight = new THREE.AmbientLight("#ffffff", 1);
				scene.add(ambientLight);

				grid = new THREE.GridHelper(20, 40, 0xffffff, 0xffffff);
				grid.material.opacity = 0.2;
				grid.material.depthWrite = false;
				grid.material.transparent = true;
				scene.add(grid);

				floor = new THREE.Mesh(
					new THREE.BoxGeometry(3, 0.1, 3)
				);
				floor.position.y = 0.5;
				// floor.rotation.z = 0.5;
				scene.add(floor);
				physics.addMesh(floor);

				const material = new THREE.MeshLambertMaterial();

				const matrix = new THREE.Matrix4();
				const color = new THREE.Color();

				// Boxes

				const geometryBox = new THREE.BoxGeometry(0.1, 0.1, 0.1);
				boxes = new THREE.InstancedMesh(geometryBox, material, 100);
				boxes.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // will be updated every frame
				boxes.castShadow = true;
				boxes.receiveShadow = true;
				scene.add(boxes);

				for (let i = 0; i < boxes.count; i++) {

					matrix.setPosition(Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5);
					boxes.setMatrixAt(i, matrix);
					boxes.setColorAt(i, color.setHex(0xffffff * Math.random()));

				}

				physics.addMesh(boxes, 1);

				createGUI();
			}

			function createGUI() {
				const states = ['红色', '蓝色', '黄色'];
				const emotes = '000';

				const params = {
					rotation: 0,
					// 关闭车门: carClose,
					// 车内视角: carIn,
					// 车外视角: carOut,
				};
				// const bc = {
				// 	车身颜色: '#6e2121',
				// 	opacity: 1,
				// }
				// const gc = {
				// 	玻璃颜色: '#aaaaaa',
				// 	opacity: 1,
				// }
				// const dc = {
				// 	细节颜色: '#6c6c6c',
				// 	opacity: 1,
				// }
				const gui = new GUI();
				// gui.addColor(bc, '车身颜色').onChange(function() {});
				// gui.addColor(dc, '细节颜色').onChange(function() {});
				// gui.addColor(gc, '玻璃颜色').onChange(function() {});

				gui.add(params, "rotation", -5, 5).onChange(function() {
					floor.rotation.z = params.rotation;
				});
				// gui.add(params, emotes[1]);
				// gui.add(params, emotes[2]);
				// gui.add(params, emotes[3]);
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function render() {

				controls.update();

				renderer.render(scene, camera);

				let index = Math.floor(Math.random() * boxes.count);

				position.set(0, Math.random() + 1, 0);
				physics.setMeshPosition(boxes, position, index);
			}

			init();
		</script>

	</body>
</html>