Three.js基本使用

落日映苍穹つ 2022-09-11 12:25 150阅读 0赞

1.文件结构

![20210916171340209.png][]

2.效果（是动图，自己试一下吧）

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWpheFBvc3QyOTM2MTQ_size_13_color_FFFFFF_t_70_g_se_x_16][]

3.代码

// 创建场景
    const scene = new THREE.Scene()
    
    // 创建相机   PerspectiveCamera：透视视角    OrthographicCamera：正射投影
    // PerspectiveCamera('视角 60-90','投影窗口长宽比','从距离摄像机多远开始渲染','从距离摄像机多远结束渲染 1000')
    let wid = window.innerWidth
    let hei = window.innerWidth
    const camera = new THREE.PerspectiveCamera(75, wid / hei, 0.1, 1000)
    
    // 相机空间Z轴位置
    camera.position.z = 5  //越大看着越小
    
    //创建渲染器
    const renderer = new THREE.WebGLRenderer()
    
    // 设置渲染器场景大小
    renderer.setSize(wid, hei)
    
    // 渲染器添加到body中
    document.body.appendChild(renderer.domElement)
    
    // 创建几何模型
    // BoxBufferGeometry(x,y,z)
    const geometry = new THREE.BoxBufferGeometry(1, 1, 1)
    
    // 创建纹理贴图
    const texture = new THREE.TextureLoader().load(
    	`https://gimg2.baidu.com/image_search/src=http%3A%2F%2F
    img.16pic.com%2F00%2F88%2F44%2F16pic_8844212_s.jpg&refer=
    http%3A%2F%2Fimg.16pic.com&app=2002&size=f9999,
    10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634374100&t=bd29fc2bad9abb4c87b06e655650fa6a`)
    
    // 创建几何体的材质    MeshBasicMaterial:基础网格材质  平面或线框 不受光照的影响
    const material = new THREE.MeshBasicMaterial({ map: texture })   //color: 0x00ff20
    
    // 创建几何体网格对象
    const cube = new THREE.Mesh(geometry, material)
    
    // 将网格对象添加到场景中
    scene.add(cube)
    
    
    
    // 渲染循环 游戏循环
    function animate() {
    	// 网格自转
    	cube.rotation.x += 0.01
    	cube.rotation.y += 0.01
    
    	// 渲染器渲染场景和相机
    	renderer.render(scene, camera)
    
    	// 让浏览器去执行一次参数中的函数
    	requestAnimationFrame(animate)
    }
    
    animate()
    
    
    
    // 尺寸响应式
    window.addEventListener('resize', () => {
    	// 重新获取宽高
    	let newWid = window.innerWidth
    	let newHei = window.innerWidth
    
    	// 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。
    	camera.aspect = newWid / newHei
    
    	// 更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
    	camera.updateProjectionMatrix()
    
    	// 更新渲染器场景大小
    	renderer.setSize(newWid, newHei)
    })

4.three.js api 地址 [http://www.yanhuangxueyuan.com/threejs/docs/index.html\#api/zh/materials/MeshBasicMaterial.alphaMap![icon-default.png?t=L892][icon-default.png_t_L892]http://www.yanhuangxueyuan.com/threejs/docs/index.html\#api/zh/materials/MeshBasicMaterial.alphaMap][http_www.yanhuangxueyuan.com_threejs_docs_index.html_api_zh_materials_MeshBasicMaterial.alphaMap_icon-default.png_t_L892_icon-default.png_t_L892_http_www.yanhuangxueyuan.com_threejs_docs_index.html_api_zh_materials_MeshBasicMaterial.alphaMap]

[20210916171340209.png]: /images/20220828/7719c831af024cee97bedb0fbc77b420.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYWpheFBvc3QyOTM2MTQ_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a411b9e9ef254600a8fa011bf03191aa.png
[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[http_www.yanhuangxueyuan.com_threejs_docs_index.html_api_zh_materials_MeshBasicMaterial.alphaMap_icon-default.png_t_L892_icon-default.png_t_L892_http_www.yanhuangxueyuan.com_threejs_docs_index.html_api_zh_materials_MeshBasicMaterial.alphaMap]: /images/20220828/ef3b2ef995484aaeb569d8d84e9b25d4.png