three.js 球

2024-10-21

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

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

js模拟抛出球运动

js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行计算,要如何对方程进行适应性修改代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Typ

js课程 6-15 js简单弹力球如何实现

js课程 6-15 js简单弹力球如何实现一.总结一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.document的body属性和documentElement属性的区别是什么? 比如body中只有一个img的时候那么body的区域就是只有img的这么大documentElement的范围就是整个document文档 2.如何实现弹力球到底部之后反弹的问题? 让增值变为负的即可 41 setInterval

js版弹力球实例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹力球实例</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #E8F8F8; } img{ width:50px; height: 50px; po

用js，css3 做的一个球

用css3属性很容易做一个立方体,但是要做一个球体,会相对复杂些原理是:球可以看做是由无数个圆圈构成,然后就可以用圆圈来做球, 下面的例子是我做的一个小球,由72个圆圈组成.如果把每个圆圈的背景颜色设置同一颜色,效果更佳 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <styl

js制作可拖拽可点击的悬浮球

兼容mouse事件和touch事件,支持IE9及其以上效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE html> <html lang="en">  <!-- saved from url=(0014)about:internet

标签球-Js插件

今天上学校的图书馆,看到了一个好玩的东西,特意百度了下,发现叫做“标签球”,效果图为: 直接代码如下: #div1 {position:relative; width:350px; height:350px; border:1px solid #000; margin: 20px auto 0; } #div1 a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:#000; font-weigh

【JavaScript】用JS绘制一个球

参考: 1.http://www.w3school.com.cn/html5/html_5_canvas.asp 2.http://blog.csdn.net/qq_27626333/article/details/51595138 效果图: 思路: 1.创建一个画布. 2.在画布上绘制一个圆. 3.把画布放到HTML页面上. 代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met

js 实现弹力球效果

1.html代码: <div id='imgid'> <img src="img/5.png"> </div> 2.js代码: imgobj=document.getElementById('imgid'); //可视区域的高(视口高-图片所占的高度) screenHeight=document.documentElement.clientHeight; imgHeight=158;/*imgobj.clientHeight*/ diffHeight

THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

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

JS实现弹性势能效果(弹力球效果[实现插件封装])

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>弹性势能动画(弹力球效果)</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: absolute; top: 0; lef

js实现动态球球背景

document.getElementsByTagName("body")[0].style.backgroundColor="#000" //构造函数 function Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace,opc){ this.dom = null this.size = size this.left1 = left1 this.top1 = to

原生js弹力球

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

非常漂亮js动态球型云标签特效代码

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base targe

JS 蓝球弹起的高度 100 米第几次高度小于1米

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var j = 0; var h = 100; for(var i = 0;i>=0;i++){

Js的语法和循环

1.蓝球弹起的高度篮球从10米高的地方落下,每次弹起的高度是原来的0.3倍,问弹跳10次之后篮球的高度. <script type="text/javascript"> var t=10 for( var i=1;i<=10;i++) { t=t*0.3;} alert(t); 2.棋盘放粮食棋盘有32个格子,第一个格子放1个芝麻,第二个放2个,第三个放4个,第四个放8个...每个芝麻的重量为0.00001kg,如果要放满整个棋盘,需要多少重量的芝麻. var a

js/jquery/html前端开发常用到代码片段

1.IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容. 条件注释使用方法示

html5悬浮球效果

自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq做的.所以这里要引用js文件.我引用的是jquery-1.8.2.js PublicJs.js 主要是判断是否是手机端,来确定是使用点击或触摸事件用的 var PublicJs = {}; PublicJs.IsPhone = function () {//判断是否是手机浏览器 try { if (

拾取模型的原理及其在THREE.JS中的代码实现

1. Three.js中的拾取 1.1. 从模型转到屏幕上的过程说开由于图形显示的基本单位是三角形,那就先从一个三角形从世界坐标转到屏幕坐标说起,例如三角形abc 乘以模型视图矩阵就进入了视点坐标系,其实就是相机所在的坐标系,如下图: 进入视点坐标系后,再乘以投影矩阵,就会变换到一个立方体内,如下图: 这个时候整个三角形就位于中心位于坐标系原点,边长为2的立方体内,在这个立方体内,三角形要计算光照,要裁剪,然后乘以视口矩阵,最后转到屏幕上. 转到屏幕上后,三角形的所有点的Z坐标就是深度坐标,

【three.js详解之一】入门篇

[three.js详解之一]入门篇开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述th

underscore.js库的浅析

Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文称“Underscore对象”).生成一个Underscore对象: <script> var jsData = { name : 'data' } // 通过_()方法将对象创建为一个Underscore对象 var underscoreData = _(jsData); //_就是Underscore构造函数的标识 // underscoreDat

three.js 球

热门专题