three.js的基础使用

1、npm 引入（需安装npm, 安装three, 不需要单独引入loader等）。

2、通过外部cdn链接直接引入（直接html起步，简单一把梭，需单独引入loader, model, controls等）。

1、创建场景

2、可以设置background和environment.

3、接下来所有的object都需要添加在scene中。

1、相机类型有

2、创建相机

1、创建渲染器

2、放入场景和相机，并挂载到HTML上。

1、three.js中有很多元素可以添加，比如Line,Geometry, Helper, light ,还可以引入图片或者模型model(需要loader).

1、

2、

1、主体script需添加type="module", 不然不起作用。

2、要在html里直接使用three.js，需要添加importmap

3、安装live preview扩展，创建本地服务器，解决跨域问题。

我说一下我的实现场景。

1.引入了一个obj的模型（引入相应的loader.js。我这里用的MTL,OBJ,DDSloader）

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() )

    var mtlLoader = new THREE.MTLLoader()

    mtlLoader.load('model/gaoda/file.mtl',function(materials){

materials.preload()

var loader = new THREE.OBJLoader()

loader.setMaterials(materials)

loader.load( 'model/gaoda/file.obj', function ( obj ) {

  _this.cube = obj

  _this.cube.position.set(0,1,0)

  _this.scene.add( _this.cube )

}, onProgress, onError )

})

2.在three的raysects为模型添加事件

var raycaster = new THREE.Raycaster()

var mouse = new THREE.Vector2()

mouse.x = ( event.clientX / window.innerWidth )*2 - 1

mouse.y = -( event.clientY / window.innerHeight )*2 + 1

raycaster.setFromCamera( mouse, _this.camera )

var intersects = raycaster.intersectObjects( _this.cube.children )

_this.initMessage(intersects,event.clientX,event.clientY)

3.最后监听该点击事件就行了。

 window.addEventListener('click',this.clickModel,false)

效果图如下:

我也是才开始学习THREE。希望能帮助到你。

---