yulingjia - 博客园

2022年8月2日

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

posted @ 2022-08-02 09:46 yulingjia 阅读(39) 评论(0) 推荐(0)

2022年8月1日

WebGL基础（9）双击控制全屏他和退出全屏

摘要： // 双击控制全屏他和退出全屏 window.addEventListener("dblclick", () => { const fullScreenElement = document.fullscreenElement if (!fullScreenElement) { // 用画布对象进入全阅读全文

posted @ 2022-08-01 17:51 yulingjia 阅读(121) 评论(0) 推荐(0)

WebGL基础（8）监听尺寸变化，更新渲染页面

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

posted @ 2022-08-01 17:25 yulingjia 阅读(171) 评论(0) 推荐(0)

WebGL基础（7）GSAP动画库的基本使用

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

posted @ 2022-08-01 17:11 yulingjia 阅读(274) 评论(0) 推荐(0)

WebGL基础（6）通过Clock跟踪时间处理动画

摘要： // init方法最后面 // 设置时钟 this.clock = new THREE.Clock() this.render() // 渲染函数 render () { // 物体会沿着x轴一直循环运动 // this.cube.position.x += 0.01 // this.cube.ro 阅读全文

posted @ 2022-08-01 16:26 yulingjia 阅读(143) 评论(0) 推荐(0)

WebGL基础（5）应用requestAnimationFrame

摘要： // 渲染函数 render (time) { // 物体会沿着x轴一直循环运动 // this.cube.position.x += 0.01 // this.cube.rotation.x += 0.1 let t = (time / 1000) % 5 this.cube.position.x 阅读全文

posted @ 2022-08-01 16:15 yulingjia 阅读(94) 评论(0) 推荐(0)

WebGL基础（4）物体的位置、缩放、旋转属性

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

posted @ 2022-08-01 15:49 yulingjia 阅读(176) 评论(0) 推荐(0)

WebGL基础（3）添加坐标轴辅助器

摘要：我就不贴的代码了前面有基础代码 // 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper( 5 ) this.scene.add( axesHelper ) 阅读全文

posted @ 2022-08-01 15:31 yulingjia 阅读(48) 评论(0) 推荐(0)

WebGL基础（2）添加轨道控制器查看物体(3D)

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

posted @ 2022-08-01 15:23 yulingjia 阅读(75) 评论(0) 推荐(0)

WebGL基础（1）一个基本的WebGL静态页面

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

posted @ 2022-08-01 14:45 yulingjia 阅读(134) 评论(0) 推荐(0)

公告