【Three.js :语法】引入物理引擎：Physijs

1、为Physijs设置两个属性：

Physijs.scripts.worker = '../js/Physijs/physijs_worker.js';

Physijs.scripts.ammo = 'ammo.js';

目的1：设置一个单独的线程来计算物理模拟的，避免渲染被影响而引起的卡顿。--执行的任务线程

目的2：Physijs.js实际只是ammo.js和three.js中部分内容的一个包装器，所以需要引入实际物理引擎库。

2、创建物理场景：

var phyScene = new Physijs.Scene();

phyScene.setGravity(new THREE.Vector3(0,-10,0)); --设置重力方向和大小

3、对对象（模型）进行包装。

var stoneGeom = new THREE.CubeGeometry(...);

var stone = new Physijs.BoxMesh(stoneGeom, new THREE.MeshPhongMaterial(...));

phyScene.add(stone);

【注意】BoxMesh()可以更换，Geom是普通的Geometry，MeshPhongMaterial是否可以改变(还是普通的Material)？或者需要什么特殊的要求吗？

4、实时渲染的处理：

目的：告诉Physijs模拟物理效果，并更新场景中各对象的位置和角度。 --所以实时渲染的地方也需要调用Physijs中的函数。

render = function (){

requestAnimationFrame(render);

renderer.render(phyScene,camera);

phyScene.simulate() ; //注意

}

例子：

1、多个例子： http://chandlerprall.github.io/Physijs/

2、

3、three.js-physics engine

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>three-physics</title>
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript" src="../js/three/three.min.js"></script>
		<script type="text/javascript" src="../js/three/ThreeBSP.js"></script>
		<script type="text/javascript" src="../js/Physijs/physi.js"></script>
		<script>
			'use strict';
			Physijs.scripts.worker = '../js/Physijs/physijs_worker.js';
			Physijs.scripts.ammo = 'ammo.js';
			var scene, renderer, camera;
			function init() {
				scene = new Physijs.Scene();
				scene.setGravity(new THREE.Vector3(0, -10, 0));
				renderer = new THREE.WebGLRenderer({
					antialias: true
				});
				renderer.setClearColor(0xffffff);
				renderer.setSize(window.innerWidth, window.innerHeight);
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
				camera.position.set(0, 60, 0);
				camera.lookAt(new THREE.Vector3(0, 0, 10));
				var light = new THREE.AmbientLight(0xffffff);
				scene.add(light);
				var geometry = new THREE.CubeGeometry(4, 4, 4);
				var material = new Physijs.createMaterial(new THREE.MeshPhongMaterial({
					color: 0x4d6dad
				}));
				var mesh = new Physijs.BoxMesh(geometry, material, 1);
				mesh.position.set(1.5, 10, 15);
				mesh.rotation.y = Math.PI / 4;
				scene.add(mesh);
				var geometry = new THREE.CubeGeometry(4, 4, 4);
				var material = new Physijs.createMaterial(new THREE.MeshPhongMaterial({
					color: 0xe6db74
				}));
				var mesh2 = new Physijs.BoxMesh(geometry, material, 1);
				mesh2.position.set(-1.5, 10, 15);
				mesh2.rotation.y = Math.PI / 4;
				scene.add(mesh2);
				var geometry = new THREE.CubeGeometry(100, 100, 100);
				var material = new Physijs.createMaterial(new THREE.MeshPhongMaterial({
					color: 0xeeeeee
				}));
				var mesh3 = new Physijs.BoxMesh(geometry, material, 0);
				mesh3.position.set(0, -100, 0);
				scene.add(mesh3);
				document.body.appendChild(renderer.domElement);
				render();
			}
			function render() {
				renderer.render(scene, camera);
				requestAnimationFrame(render);
				scene.simulate();
			}
			init();
		</script>
		<script type="text/javascript" src="../js/cjy_info.js"></script>
	</body>

</html>

附：

three.js中的Physijs.js只是ammo.js(真的物理引擎)的包装器，提供比ammo.js更好用的接口。

three.js的各个版本中还有一个分支用Cannon.js作为物理引擎。

【Three.js :语法】引入物理引擎：Physijs

猜你喜欢