yulingjia - 博客园

2022年8月4日

摘要： <template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import 阅读全文

posted @ 2022-08-04 15:00 yulingjia 阅读(88) 评论(0) 推荐(0) 编辑

WebGL进阶（9）聚光灯属性与应用

摘要： 1.重点代码 // 聚光灯 const spotLight = new THREE.SpotLight(0xffffff, 1) spotLight.position.set(5, 5, 5) spotLight.castShadow = true spotLight.intensity = 2 / 阅读全文

posted @ 2022-08-04 14:40 yulingjia 阅读(118) 评论(0) 推荐(0) 编辑

WebGL进阶（8）灯光与阴影

摘要： 1. 重要步骤 // 目标：灯光与阴影 // 灯光阴影 // 1、材质要满足能够对光照有反应 // 2、设置渲染器开启阴影的计算 this.renderer.shadowMap.enabled = true; // 3、设置光照投射阴影 directionalLight.castShadow = t 阅读全文

posted @ 2022-08-04 11:35 yulingjia 阅读(156) 评论(0) 推荐(0) 编辑

WebGL进阶（7）加载hdr环境贴图

摘要： 1.重点代码 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader" // 加载hdr环境图 const rgbeLoader = new RGBELoader() rgbeLoader.loadAsync('others 阅读全文

posted @ 2022-08-04 10:25 yulingjia 阅读(748) 评论(1) 推荐(1) 编辑

2022年8月3日

WebGL进阶（6）环境贴图与映射贴图

摘要： 1.重点代码 // 3. 添加物体 // 环境贴图与映射贴图 // 设置cub加载管理器 const cubeTextureLoader = new THREE.CubeTextureLoader() const envMapTexture = cubeTextureLoader.load([ re 阅读全文

posted @ 2022-08-03 16:19 yulingjia 阅读(240) 评论(0) 推荐(0) 编辑

WebGL进阶（5）纹理加载进度情况

摘要： 1. 重点代码 // 设置加载管理器 let event = {} event.onLoad = () => { console.log('图片加载完成') } event.onProgress = (texture, num, total) => { console.log('图片:' + tex 阅读全文

posted @ 2022-08-03 15:38 yulingjia 阅读(113) 评论(0) 推荐(0) 编辑

WebGL进阶（4）标准网格材质

摘要： 1.重点代码 // 使用MeshStandardMaterial标准网格材质后需要设置灯光 // 环境光 const light = new THREE.AmbientLight(0xffffff, 0.5) this.scene.add(light) // 直线光源 const directio 阅读全文

posted @ 2022-08-03 14:39 yulingjia 阅读(116) 评论(0) 推荐(0) 编辑

WebGL进阶（3）环境遮挡图与强度

摘要： const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) const texture_s = new THREE.TextureLoader().load(require('../as 阅读全文

posted @ 2022-08-03 14:21 yulingjia 阅读(92) 评论(0) 推荐(0) 编辑

WebGL进阶（2）纹理属性及透明纹理

摘要： 1. 重点代码 (1) （2） (3) // 3. 添加物体 // (1) 导入纹理图片 // const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg')) // 添加纹理属性 // 设置阅读全文

posted @ 2022-08-03 11:20 yulingjia 阅读(320) 评论(0) 推荐(0) 编辑

2022年8月2日

WebGL进阶（1）生成酷炫三角形

摘要： 1. 重点代码 // 3. 添加物体打造酷炫三角形 for (let i = 0; i < 50; i++) { const geometry = new THREE.BufferGeometry() const positionArray = new Float32Array(9) // 每个三阅读全文

posted @ 2022-08-02 16:45 yulingjia 阅读(63) 评论(0) 推荐(0) 编辑

公告