几何立方体 three.js

2024-10-20

《Three.js 入门指南》3.1.1 - 基本几何形状-立方体（CubeGeometry）

3.1 基本几何形状立方体(CubeGeometry) 构造函数: THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) width:是x方向上的长度: height:是y方向上的长度: depth:是z方向上的长度: 后三个参数分别是在三个方向上的分段数,一般情况下不需要分段的话,可以不设置后三个参数,后三个参数的缺省值为1.其他几何形状中的分段也是类似的,下面不做说明.

Unity(2) 脚本简单操作

生命周期(按顺序排列) Awake():脚本唤醒,系统执行的第一个方法,在脚本声明周期内只执行一次,初始化一般可以在这里 Start():Awake之后,Update之前,只执行一次,一般在awake中初始化比这里好, Update():每帧调用一次,逻辑更新 LateUpdate():在Update之后调用,每帧调用一次,一般摄像机在这里更新 FixedUpdate():固定(时间)更新,Eidt->Project Settings->Time中设置更新频率,默认0.02s,一般用于刚体物理

Three.js基础探寻四——立方体、平面与球体

前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 w

关于Three.js基本几何形状之SphereGeometry球体学习

一.有关球体SphereGeometry构造函数参数说明 <1>.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) radius - sphere radius. Default is 50. 球体半径默认值 50 widthSegments - number of horizontal segments. Minimum value is 3

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas

关于Three.js基本几何形状

一.有关球体SphereGeometry构造函数参数说明 SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) radius — sphere radius. Default is 50. 球体半径默认值 50 widthSegments — number of horizontal segments. Minimum value is 3, and

three.js学习：初学three.js，从立方体开始

目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据WebGL中文网的threejs教程开始学习,因为教程里的部分代码已经不适用(过时)了,导致学习的时候有些磕磕绊绊,故记录下自己编写的代码,以便以后查阅. 1.index.html <!DOCTYPE html> <html lang="en"> <head&g

仿智能社官网：原生JS实现简单又酷炫的3D立方体时钟

先放一下我做的效果:https://linrunzheng.github.io/3Dclock/3Dclock/new.html 至于3D立方体怎么做这里就不在阐述了,可以看一下我之前的博客. 这里默认你已经做好了6个立方体,直接上JS代码: 页面进来的时候,先给6个立方体赋值上现在的时间,由于立方体比较小,左右2个面看不清且影响效果,这里左右2个面就不赋time了: //获取元素 var oul = document.querySelectorAll("ul"); var back

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在网上汇总了一些这样的代码. 二.3D效果代码 2.1.旋转相册 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转相

《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环结（TorusKnotGeometry）

3.1 基本几何形状圆环结(TorusKnotGeometry) 构造函数 THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale) 圆环节和圆环很相似,只是多了一些参数. radius : 圆环的半径,默认值为1.tube : 管道的半径,默认值为0.4.tubularSegments : 管道的分段数量,默认值为64.radialSegments : 横截面分段数量,默

《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环面（TorusGeometry）

3.1 基本几何形状圆环面(TorusGeometry) 构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc) radius:圆环半径: tube:管道半径: radialSegments与tubularSegments分别是两个分段数,详见下图: arc是圆环面的弧度,缺省值为Math.PI * 2. 一个标准圆环的demo代码以及效果图 <!DOCTYPE html> <html l

《Three.js 入门指南》3.1.1 - 基本几何形状 -圆柱体（CylinderGeometry）

3.1 基本几何形状圆柱体(CylinderGeometry) 构造函数: THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded) radiusTop:顶面的半径: radiusBottom:底面的半径: height:是圆柱体的高度: radiusSegments:两底面的分段切片: heightSegments:侧面的分段切片: openEnded:

《Three.js 入门指南》3.1.1 - 基本几何形状 -圆形（CircleGeometry）

3.1 基本几何形状圆形(CircleGeometry) 说明: 可以创建圆形或者扇形构造函数: THREE.CircleGeometry(radius, segments, thetaStart, thetaLength) radius:半径: segments:以一个点为中心的切片数(切蛋糕?): thetaStart:开始位置: thetaLength:扇面跨度: 一个完整的代码示例demo和效果: <!DOCTYPE html> <html lang="en&quo

《Three.js 入门指南》3.1.1 - 基本几何形状 - 球体（SphereGeometry）

3.1 基本几何形状球体(SphereGeometry) 构造函数: THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength) radius:是半径: segmentsWidth:经度上的切片数,相当于经度被切成了几瓣: segmentsHeight:纬度上的切片数,相当于纬度被切成了几层: phiStart:经度开始的弧度: phiLeng

《Three.js 入门指南》3.1.1 - 基本几何形状 - 平面（PlaneGeometry）

3.1 基本几何形状平面(PlaneGeometry) 说明: 这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面. 构造函数: THREE.PlaneGeometry(width, height, widthSegments, heightSegments) width:x方向上的长度: height:是y方向上的长度: widthSegments:x轴方向的分段: heightSegments:y轴方向的分段. 如new THREE.PlaneGeom

three.js立方体

<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - geometry - cube</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, m

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发

js拖拽3D立方体旋转

这段时间有点闲,所以就自己找些小玩意来练习练习.今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子,布局方面用到css3 3D转换技术,通过transform控制旋转实现的. 上个图代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=

Opengl创建几何实体——四棱锥和立方体

//#include <gl\glut.h>#include <GL\glut.h>#include <iostream> using namespace std; float rtri;float rquad; GLfloat points0[5][3] = { {0,1,0},{-1,-1,1},{1,-1,1},{1,-1,-1},{-1,-1,-1} };GLfloat points1[8][3] = { {1,1,-1},{-1,1,-1},{-1,1,1},

《Three.js 入门指南》3.1.1 - 基本几何形状 -多面体

3.1 基本几何形状多面体构造函数正四面体(TetrahedronGeometry).正八面体(OctahedronGeometry).正二十面体(IcosahedronGeometry)的构造函数较为类似,分别为: 正四面体(TetrahedronGeometry): THREE.TetrahedronGeometry(radius, detail) 正八面体(OctahedronGeometry): THREE.OctahedronGeometry(radius, detail) 正二

几何立方体 three.js

热门专题