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、
<!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作为物理引擎。