初次使用babylonjs

访问官网

我是真没想到使用这个库的第一个麻烦，居然是文档访问过慢。 慢到点了之后全然没反应，让人怀疑是不是年久失修。 老办法， 先把文档下载下来，本地运行. 结果下载缓慢，先将就一下官网吧。

先 npm i babylonjs， 这个包名是我直接在npm上搜出来的, 这个包之所以是babylonjs是因为babylon已经被另一个库占用了。

用的是之前搭好的ts环境，所以我又 npm i @types/babylonjs 果然有。有了ts ,代码即文档。 官网的第一个示例，隐去了头尾，那我就只能猜了， 然后通过ts的语法提示，补全。

官网代码

我的ts代码

结果 没有报错 ，但是, 除了默认的背景， 并不见立方体。于是，我点了一下，官网示例代码上面的下载。下载下来完整的代码，除了获取engine是异步的，我还没看到什么区别，后来试着加了连续渲染，就出来了。 最让我奇怪的是 ，居然不用在场景里添加物体， 光源好歹还在初始化的时候就和场景关联了起来。

这个是官网下载下来的部分源码 ，因为我确实没发现哪里有异步，Engine函数不是异步的，因为提示的返回值不是promise.

最终代码

import {Scene, ArcRotateCamera, HemisphericLight, MeshBuilder , Vector3, Engine} from 'babylonjs'

const { PI, sin, cos , tan, random } = Math

class Cube{ 
    constructor(canvas :HTMLCanvasElement){ 
        const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')
        const engine  =new Engine(gl, ) ;
        const scene = new Scene(engine )
        const camera  =new ArcRotateCamera('c1', -PI/2, PI/2.5 , 3 ,new Vector3(0,1,0),  )
        const light = new HemisphericLight('l1', new Vector3(1,1,1),scene) ;
        const box  =  MeshBuilder.CreateBox('box' , {})
        box.position.y = 1
        camera.attachControl(canvas, true) ;
        this.scene =scene ;
        // scene.addMesh(box) ;
        // scene.addLight(light)
    }
    scene ;

    render(){ 
        this.scene.render()
    }
}


const [ vw, vh] = [window.innerWidth -6, window.innerHeight -6]
// const canvas= document.getElementById('3d') as HTMLCanvasElement ; 都是断言 有点强转类型的意思
const canvas= <HTMLCanvasElement>document.getElementById('3d')  ;
canvas.width =  vw ;
canvas.height = vh ;
const cube  =new Cube(canvas) ;

cube.render() ; //  直接调没反应。要连续渲染才出来，说明，有些东西是异步的
ani()
function ani(){ 
    cube.render()
    requestAnimationFrame(ani)

}

确实不需要把物体放入场景，下次再研究是怎么回事。效果如下， 这个相机轨道控制器默认是有惯性的。 以后就可以看本地的文档了