Three.js
关注
分享
扫一扫
芸轩
抓住现在，博取明天
展开
-
Three.js TransformControls 和 TrackballControls 介绍
1、TransformControlsTransformControls是变换控制器，可以操纵物体进行移动、缩放、旋转操作。实例生成：var control = new TransformControls( camera, renderer.domElement );//camera是相机对象，renderer是渲染器对象可以通过setMode来实现相关操作：control.setMo...原创 2020-04-12 20:43:34 · 3445 阅读 · 0 评论 -
基于three.js写的一个简易照片墙
学习three.js的过程中，写的一个简易照片墙，可以使用鼠标滚轮上下浏览，采用的是移动相机的方式。代码贴出来，供学习这一块的朋友们参考和指导：<!DOCTYPE HTML><HTML><HEAD> <META charset="utf-8"> <META name="viewport" content="wid...原创 2019-11-08 19:34:28 · 1739 阅读 · 0 评论 -
Three.js 学习记录 之 几何体（二）
三维几何体1、CubeGeometry主要是用来创建四方体的，只要指定宽度、高度、深度既可以创建出一个方块，参数如下：new THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);width, height, depth是必须的参数width：宽度原创 2016-11-02 14:08:56 · 1738 阅读 · 0 评论 -
Three.js 学习记录 之 几何体（一）
几何体是一个很重要的东东，它描述了你所要显示的对象的结构形状，有了这个形状之后，就可以使用材质给这个形状增加外观，然后使用网格（Mesh）把对象显示出来。Three.js提供了丰富的几何体模型，今天了解几个模型，来和大家分享一下：Three.js库中的geometry和其它大多数三维库中的一样，基本上是三位空间中的点集，以及一些将这些点连接起来的面，举例来说，一个方块有8个角，每个角都可以原创 2016-10-28 16:05:21 · 2090 阅读 · 0 评论 -
Three.js 学习记录 之 纹理加载
最近开始学习OpenGL，不免用到了Three.js，之前学习过程中没有做记录，俗话说：好脑袋不如一个烂笔头，有时遇到一个点，记得以前弄过，可又记得不太清，不得不重新整理学习，这时往往会后悔之前怎么没做个记录，现在开始，做个记录，为以后备用！这次学习的是如何加载纹理，目前我用的是r81版本，之前的 THREE.ImageUtils.loadTexture 方法现在已经不推荐使用了，现在原创 2016-10-26 10:30:05 · 4003 阅读 · 1 评论 -
three.js 学习笔记 － 基础之起步
最近又重新学习了下three.js，还得从基础学起啊，今天起步学习，最基础的三大组件。三大组件分别是：场景（scene）、相机（camera）和渲染器（renderer），也就是靠着这三个东东，我们才能将物体渲染到网页中去。那么这三者是什么关系呢？首先，场景是一个物体的容器，开发者可以将需要的物体放入场景中，相机的作用就是把放入场景的物体拍下来，渲染器的作用就是将相机拍摄下来的图片，放...原创 2019-01-17 12:18:26 · 317 阅读 · 0 评论 -
three.js 相机camera的up和lookAt详解
three.js相机的设置很重要。甚至牵涉到缩放，旋转等动画的应用，下面就up和lookAt的用法做下解释：先来说说position属性，就是设置相机的位置，而位置设置后相机看向哪里呢？默认情况下，是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。如果不设置lookAt，相机看向的就是position的z值垂直向里看的方向。如果设置了lookAt，比...原创 2019-03-11 11:08:14 · 12781 阅读 · 3 评论 -
three.js 如何选择物体 （THREE.Raycaster简介）
在three.js，可以利用THREE.Raycaster来达到点击与交互，即选择物体的操作。那么我们先来认识一下THREE.Raycaster，它的构造函数如下：new Raycaster( origin, direction, near, far );参数介绍：origin — 射线的起点向量。direction — 射线的方向向量，应该归一标准化。near — 投射近点...原创 2019-03-21 21:35:36 · 6839 阅读 · 4 评论 -
three.js 如何设置背景图片？
有两种方式：1、使用html的body属性设置背景图片，即：body { margin: 0; overflow: hidden; background: url("background/background.png") center no-repeat; background-size:cover;}这种方法要设置渲染器的透明度，即：rend...原创 2019-08-09 15:39:41 · 14356 阅读 · 6 评论