个人简介个人主页：前端杂货铺‍♂️学习方向：主攻前端方向，正逐渐往全干发展个人状态：研发工程师，现效力于中国工业软件事业人生格言：积跬步至千里，积小流成江海推荐学习：前端面试宝典Vue2Vue3Vue2/3项目实战Node.jsThree.js数据结构与算法体系教程个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧文章目录前言一、绘制一个水平移动的点（attribute）二

一、WEBGL和Three.js的发展国际信息技术和移动端迅猛发展，Webgl+Three.js技术得到了进一步的发展，而3D工厂厂房在数字化的今天，Webgl+Three.js已经被越来越多的公司和企业应用在虚拟工厂系统

download：WebGL+Three.js入门与实战，系统学习Web3D技术React18和Next.js13：前端开发的新时代引言前端开发是一个不断变化和进化的领域，每年都有新的工具和技术出现，为开发人员提供了更多的选择和可能性

1、将模型，场景，点云加入camera场景中，camera.add(object),然后object.position.set(0,0,10),这样模型的位置总是相对于相机的z轴正10位置。注意，我在实习中，用camera.add(model);scene.add(camera)在我的电脑无报错，在前端的电脑就报错，受环境影响，需要灵活变换。用中间变量加入camera中，操作如下：camera.a

使用WebGL+Three.js制作动画场景3D图像，技术，打造产品，还有互联网：这些只是我爱好的一小部分。

在上一篇文章，我们成功实现了一个会转的转盘，接下来继续实现关于飞刀的部分。飞刀类飞刀的行为主要有两个：展示飞刀，飞刀飞向转盘。和之前的转盘类一样，我们直接将飞刀类继承THREE.Group：//忽略文件名的命名，因为我的场景它是一支笔///game/Pen.jsclassPenextendsTHREE.Group{//canvas对象canvasconstructor(canvas){this.c

微信小程序webgl+Three.js初试水最近公司找我提供一个demo，想要在微信小程序上实现一个大家在商场那些口红机会经常碰到的游戏—“转盘插刀”。

物体div#canvas-frame{border:none;cursor:pointer;width:100%;height:600px;background-color:#EEEEEE;}varrenderer;functioninitThree(){width=document.getElementById('canvas-frame').clientWidth;height=documen

1、谷歌浏览器（1）错误信息：Onlysecureoriginsareallowed(see:https://goo.gl/Y0ZkNV).（仅支持https访问）（2）如果用localhost访问，没有这种错误2、ie/edge浏览器支持3、只注解了主体部分，其他的再第一篇文章里有Three框架div#canvas-frame{border:none;cursor:pointer;width:1

课程目录01-基础部分:01-WebGL与three.js的基础、与opengl的关系.mp402-编写第一个three.js程序.mp403-three.js程序框架，绘制一条直线.mp404-三维世界的组成(点、线).mp405-坐标系的秘密（世界坐标、本地坐标）.mp406-three.js让场景动起来的两种方法.mp407-帧循环、游戏循环、渲染循环需要知道的深入意义.mp408-thre

1、谷歌浏览器（1）错误信息：Onlysecureoriginsareallowed(see:https://goo.gl/Y0ZkNV).（仅支持https访问）（2）如果用localhost访问，没有这种错误2、ie/edge浏览器支持3、只注解了主体部分，其他的再第一篇文章里有Three框架div#canvas-frame{border:none;cursor:pointer;width:1

物体div#canvas-frame{border:none;cursor:pointer;width:100%;height:600px;background-color:#EEEEEE;}varrenderer;functioninitThree(){width=document.getElementById('canvas-frame').clientWidth;height=documen