three.js
关注
分享
扫一扫
文章平均质量分 92
hello big_bear
这个作者很懒，什么都没留下…
展开
-
实现3D 场景——three.js学习篇六之划分模块
学习目标：当项目越来越复杂的时候，之前的写法就会显得很乱，很难看懂。所以我们要使用模块化开发，这样可读性会好很多，而且易于维护。用之前的一个球体的例子。代码：提示：<!DOCTYPE html><html><head> <title>球体贴图</title> <style type="text/css"> body { margin: 0; } canvas { width原创 2021-09-17 17:51:26 · 384 阅读 · 1 评论 -
实现3D 场景——three.js学习篇五之正方体贴图
学习目标：在上一篇中讲到如何在场景中放入多个物体。那么我们来设想一下，如果在放一个大的物体里面包裹着一个小的物体会怎么样呢？？？然后再给物体的各个面贴上图片会变成什么样呢？？？学习内容：1、 物体贴图2、 鼠标控制3、 自动旋转代码：<!DOCTYPE html><html><head> <title>贴图</title> <style type="text/css"> body原创 2021-09-17 14:23:20 · 1636 阅读 · 0 评论 -
实现3D 场景——three.js学习篇四之在场景放入多个物体
学习目标：在场景放入多个不同形状的物体代码：<!DOCTYPE html><html><head> <title>同时放入多个物体</title> <style type="text/css"> body { margin: 0; } canvas { width: 100%; height: 100%; } </style></head>原创 2021-09-14 18:37:55 · 1245 阅读 · 0 评论 -
实现3D 场景——three.js学习篇三之鼠标控制物体
学习目标：1、使用OrbitControls，让鼠标可以控制物体的旋转、平移、放大缩小。2、理解物体的形状geometry物体的geometry：var geometry = new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象1、SphereGeometry：球体2、BoxGeometry：正方体（三个参数分别是长宽高）3、CylinderGeometry：圆柱体，第一个参数是顶部直径、第二个参数是底部直径、第三个是圆柱高度、第四个是圆周分段数（原创 2021-09-14 18:31:10 · 2400 阅读 · 0 评论 -
实现3D 场景——three.js学习篇二之理解基础概念
学习目标：理解3D 场景前置知识学习内容：1、场景(Scene): 场景是[物体,光源等元素]的容器.可以配合 chorme 插件使用,抛出 window.scene 对象,即可实时调整和场景相关的所有对象数据,包括物体,光源等.2、相机(Camera): 场景中的相机,代替人眼去观察.一个场景中有且只能有一个相机,一般常用的是透视相机(perspectiveCamera),遵循真实的物理场景法则 – 远小近大. 还有一个叫正交相机(一般 2D 平面场景游戏使用的比较多,物体的大小和远近无关)原创 2021-09-14 17:56:53 · 400 阅读 · 0 评论 -
实现3D 场景——three.js学习篇一之运行项目
学习目标：首先运行一个three.js的项目学习内容：1、 下载three.js包导入2、 复制代码3、 修改包的导入路径4、 跑起来代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } c原创 2021-09-14 17:21:43 · 871 阅读 · 3 评论