今天郭先生说的是一个物理引擎，它十分小巧并且操作简单，没错他就是cannon.js。这些优点都源自于他是基于js编写的，对于js使用者来说cannon.js拥有其他物理引擎没有的纯粹性。从学习成本来看，cannon.js的学习成本比较低，对于新手来说比较友好，因为它有相对完善的api，学习cannon.js之前我们不妨来看看cannons.js的官方网站以及他的API，对于js学习者来说这是十分必要的。官网上面有一些example，他们十分典型并囊括了大多数的知识点，配合api一起学习是个不错的选择。在线案例请点击博客原文。效果如下图，接下来以一个小案例，简单的介绍一下cannon.js。
创建three场景（或者说three世界）来作为物理世界的载体，这一步很简单，主要就是添加渲染器、场景、相机和网格等three元素，没必要多说。
scene = new THREE.Scene();//step 1 创建场景 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.y = 30; camera.position.z = 20; camera.lookAt(0,5,0); scene.add( camera ); //step 2 场景中添加相机 scene.add(new THREE.AmbientLight(0x888888)); const light = new THREE.DirectionalLight(0xbbbbbb, 1); light.position.set(6, 30, 6); scene.add(light); //step 3 场景中添加另种光源 renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.shadowMap.enabled = true; renderer.setClearColor(0xbfd1e5); this.$refs.box.appendChild(renderer.domElement); //step 4 dom中添加渲染器 let groundGeom = new THREE.BoxBufferGeometry(40, 0.2, 40); let groundMate = new THREE.MeshPhongMaterial({color: 0xdddddd, map: texture}) ground = new THREE.Mesh(groundGeom, groundMate); ground.position.y = -0.1; ground.receiveShadow = true; scene.add(ground); //step 5 添加地面网格