three.js创建的基础框架

three.js创建的基础框架

首先给出两个教程文档
下载包地址
文档1
文档2

1. 首先我们先下载three库

npm i three@0.139 -S
或者
npm i three@0.133 -S

这篇文章就是基于这两个版本写的

这里主要讲3个引入
1.three.js是直接引入THREE对象
2.three.module.js是在html种script的type=module种引入的
3.jsm是一些插件的引用在里面

主要区分module跟普通引入的区别不然会报错

2.构建基本框架

		//创建场景
  		var scene = new THREE.Scene();
  		//创建物体 100*100*100
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var material = new THREE.MeshLambertMaterial({
            color: 0x4d90fe,//物体颜色
            opacity: 0.4,//物体透明度
            transparent: true//开启透明这个必须要有，不然就算有透明度也没效果
        });
        var cube = new THREE.Mesh(geometry, material);//把物体添加到网格体中
        scene.add(cube); //物体添加到场景中
        cube.position.set(50, 50, 50)//设置物体的位置


        // 添加光源
        const ambient = new THREE.AmbientLight(0xffffff, 0.5)//添加环境光
        scene.add(ambient)
        //const pointLight = new THREE.PointLight(0xffffff, 0.6)//添加电光
        //pointLight.position.set(200, 200, 210)//设置点光位置
        //scene.add(pointLight)
		
		//添加坐标轴 红x 绿y 蓝z 颜色可以后期自己设置 参数是坐标轴长短 太小就会在物体里面
        const axesHelper = new THREE.AxesHelper(150)
        scene.add(axesHelper)



        // 可视化点光源
        const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);//跟上面的光源差不多
        scene.add(pointLightHelper);

        // 添加摄像机
        const width = 1000
        const height = 1000
        var camera = new THREE.PerspectiveCamera(450, width / height, 10, 1000); //摄像机 角度 近点 远点 
        camera.position.set(100, 200, 200) //摄像机位置
        camera.lookAt(300, 0, 300)//相机看向那个点



        // 添加渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//渲染的大小
        document.querySelector('#app').appendChild(renderer.domElement); //渲染的dom

		//动画
        const clock = new THREE.Clock()//默认1s60帧 这样就可以进行循环动画
     
		//相机控件是可以进行视角拖动的
        const controls = new THREE.OrbitControls(camera, renderer.domElement)//相机控件 
        controls.enableDamping = true //设置阻尼也就是惯性 这个设置完必须在渲染的每帧里面执行updata方法
        controls.target.set(300, 0, 300)//跟相机的lookAt坐标一致
        function render() {
           	controls.update()//触发事件
            const spt = clock.getDelta()
            // console.log('渲染间隔时间',spt);
            renderer.render(scene, camera) //相机渲染
            cube.rotateY(0.001)
            requestAnimationFrame(render)
        }
        render()

这里延申一个坑点，
controls.target.set(300, 0, 300)//跟相机的lookAt坐标一致
controls.update()//触发事件
这串代码如果不加的话就会影响坐标原点，发现就算你设置了 camera.lookAt(300, 0, 300)//相机看向那个点相机的点但是并没有生效，加了这两行代码updated内部就会自己执行camera.lookAt.target的改变方法 所以如果发现你设置了坐标原点但是并没有改变原点，你可以加上这两行代码

这里面扩展一个知识点
requestAnimationFrame这是window的一个方法也是ES6的，其作用就是可以每秒执行60次一直执行，相当于setInterval