Three.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Three.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Three.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Three.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Three.js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)

演示:http://mrdoob.github.com/three.js/

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (4)

加载中
打分: 力荐
一个webgl的工具库,隐藏了很多底层的细节。也提供了很多好用的工具,demo丰富,适合没有3D基础的前端玩玩。
2018/07/17 02:16
回复
举报
这是一个非常好的3D引擎库,如果要学3D的可以用这个入门,另外,我看到了一个非常系统的教程,在这里网址上www.hewebgl.com,可以看看。 Three.js
2013/05/17 12:24
回复
举报
看了Three.js的演示挺炫了,有时间看看
2013/05/22 23:06
回复
举报
Three.js 有没有中文文档
2014/02/12 17:13
回复
举报
更多评论
暂无内容
发表于大前端专区
2019/05/16 13:19

学习threeJS(一)--第一个threeJs

参考:threeJS开发指南 threeJs三个基本要素 1、scene:一个容器,保存并跟踪我们想渲染的物体 2、camera:定义在scene里能看到什么 3、rederer:计算指定camera角度下scene的样子--使用什么方式渲染(常见利用显卡渲染) html:引入jQuery-1.9.0、threeJS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加光源</title> <style> body { margin: 0; overfl...

0
0
发表了博客
2020/03/08 21:33

threejs创建地球

上个月底,在朋友圈看到一个号称“这可能是地球上最美的h5”的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 线上地址 github地址 除了手机端的media控制没有去兼容,其他的基本都给仿了。 那为了让你觉得是高仿,最好使用chrome的手机调试模式进行访问。微信打开将听不见声音看不到视频... (后面再有时间看是不是仿的再进一步) 之所以要仿它,因为觉得这个h5还挺酷,想看看自...

0
0
发表了博客
2020/05/08 09:57

threejs创建地球

上个月底,在朋友圈看到一个号称“这可能是地球上最美的h5”的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 线上地址 github地址 除了手机端的media控制没有去兼容,其他的基本都给仿了。 那为了让你觉得是高仿,最好使用chrome的手机调试模式进行访问。微信打开将听不见声音看不到视频... (后面再有时间看是不是仿的再进一步) 之所以要仿它,因为觉得这个h5还挺酷,想看看自...

0
0
发表了博客
2018/12/17 14:23

ThreeJS 实例笔记

自己瞎研究的一些Threejs代码和问题笔记. -------------------------------------------------------割----------------------------------------------------------------------- Q:Threejs获取Object: let obj = 'o'; let WorldVec = obj.getWorldPosition(new THREE.Vector3()); Q:图片生成粒子 github:https://github.com/linqingwudiv1/ThreeJSPointCloudParticleExam ThreeJSPointCloudParticleExam Q.ThreeJS里的Clo...

0
0
发表了博客
2018/01/12 16:24

threejs 坐标体系

threejs的坐标体系 // 平面不旋转的效果 plane.rotation.x = 0; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; // 逆时针旋转90° plane.rotation.x = -0.5*Math.PI; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; plane.rotation.x = -Math.PI/4; plane.position.x = 0; plane.position.y = 0; plane.position.z = 0; y轴和z轴的位置要互换(上图) 上图中红绿蓝所在的方向是坐标...

0
0
发表了博客
2019/03/02 12:24

Threejs初级教程

前言 第1章 开启Threejs之旅(一) 第1章 开启Threejs之旅(二) 第2章 还记得点、线、面吗(一) 第2章 还记得点、线、面吗(二) 第4章 三维空间的观察 第3章 让场景动起来 第5章 五彩的光源(一) 第5章 五彩的光源(二) 第5章 五彩的光源(三) 第6章 纹理,不一样的皮肤(一) 第6章 将canvas作为纹理,将动画作为纹理(二) 第7章 3D模型的加载与使用 第8章:动画基础-网格模型旋转的常用技巧和方法 第9章:多摄像机、多视图、多角度摄影...

0
0
发表了博客
2018/02/28 14:59

3D全景之ThreeJs

3D全景之ThreeJs 一、前言 随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现。 据百度百科上介绍:720全景是视角超过人的正常视角的图像。顾名思义就是给人以三维立体感觉的实景360度全方位图像。全景实际上只是一种对周围景象以某种几何关系进行映射生成的平面图片,只有通过全景播放器的矫正处理才能成为三维全景(全景特指水平360度,上下360度全能观看的,能看到“...

0
0
发表于大前端专区
2019/08/15 14:09

threejs 相机旋转

一、实现物体的转动有2种方法 (1)物体本身的转动 cube.rotation.y -= 0.002; (2)相机的转动一般是围绕着世界坐标的Y轴,并设置相机的lookAt(new THREE.Vector3(0,-100,0)) let t0 = new Date() function animate() { controls.update(); let t1 = new Date(); //本次时间 let t = t1 - t0; // 时间差 //camera.translateX(0.001 * t/3) //沿着Y轴旋转着从大到小 ...

0
0
发表了博客
2019/02/13 10:58

threejs 初识

用于展示3D动效,就是 跟拍电影一样,需要有3大模块:scene,camera,renderer。 scene:场景,用于放置用到的模型。 camera:摄像机,拍电影似的,得有个摄像机。 renderer:渲染器,很重要,用于与被渲染的dom元素挂钩,也用于 与场景、摄像机 挂钩。 一个动效的制作过程如下: 得到三大基础模块:scene, camera, renderer 绘制结果与DOM挂钩 加载摄像头控制器(可选),用于 旋转、缩放等效果 添加场景内 模型 渲染 事件设置...

0
0
发表于大前端专区
2020/11/05 23:10

threejs基础学习一

three.js是个插件库,就是使用javascript 来写3D程序。 网上教程挺多的,官方的中文文档也有,甚至有本书《Three.js开发指南》,所以这个插件库还是很成熟的。 没错,最近一直抱着书看。 这篇文章总结一下最基础的threejs知识,至少简简单单能写出个这样的效果。 首先呢,使用threejs需要先安装,可以直接下载个threejs文件,本地静态引用。 下载地址:https://threejs.org/build/three.js 但我还是推荐的npm安装,新建个vue项目...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2019/06/28 14:14

为什么做webgl开发的人这么少?

webgl一般运用在什么行业比较多?为什么那么少人在做这个?

3
0
发表了问答
2020/12/02 20:12

如何系统的学习three.js?

这里有一张3D家族图谱,three.js是基于WebGL的3D图形引擎库,和Unity 3D是类似的渲染器。 Three.js解决了WebGL开发复杂的难题,它封装了场景、相机、几何、3D模型加载器、灯光、材质、着色器、动画、粒子、数学工具等概念,开发流程如下: 这里涉及到一个规律,越底层的技术,如OpenGL、DirectX、Vulkan,用起来就越困难,基本上也很少有开发案例,因为这个并不实用。Javascript封装库更简单,以便降低开发门槛,并不存在必须要...

1
0
发表于大前端专区
2020/11/02 10:48

three.js在ios上的浏览器运行会导致崩溃而不断的刷新

我的项目使用的是three.js进行编程 主要的场景描述:使用THREE.CubeGeometry创建模型,然后加上一些位移动画,让这些模型拼接成想要的效果,每一个模型都带有贴图,使用THREE.MeshPhongMaterial进行渲染。整个场景大概有一百多个左右的模型,主要使用for循环去生成。 问题:实际在安卓手机上运行没有什么问题,但是一旦在ios上运行,浏览器会加载到一半就自己刷新,不断这样反复,试过好几个ios手机都是这样,但是如果减少模型的...

1
0
发表于大前端专区
2020/10/29 14:15

关于使用three.js创建多个模型的场景,在ios上的浏览器运行会导致崩溃而不断的刷新

我的项目使用的是three.js进行编程 主要的场景描述:使用THREE.CubeGeometry创建模型,然后加上一些位移动画,让这些模型拼接成想要的效果,每一个模型都带有贴图,使用THREE.MeshPhongMaterial进行渲染。整个场景大概有一百多个左右的模型,主要使用for循环去生成。 问题:实际在安卓手机上运行没有什么问题,但是一旦在ios上运行,浏览器会加载到一半就自己刷新,不断这样反复,试过好几个ios手机都是这样,但是如果减少模型的...

1
0
发表于大前端专区
2018/04/18 15:11

关于AR.js中Marker黑框的问题

最近在研究AR.js,使用他们提供的Marker训练工具,最终Marker必须加这个黑框,但实际应用场景这个黑框是不能加的,有没有其他的识别方式?

1
0
发表了问答
2017/12/19 11:17

用requestAnimationFrame怎样在暂停后再重新启动仍然在暂停的位置接着运动而不是重新运动?

用requestAnimationFrame怎样在暂停后再重新启动仍然在暂停的位置接着运动而不是重新运动? 我用了cancelAnimationFrame()来停止运动,但重新调用requestAnimationFrame()是重头开始运动,而不是在停止的位置接着运动,各位大神,这个怎样实现~

1
0
2018/04/13 12:00

three.js加载obj模型网页控制台报错

用three.js框架加载外部OBJ模型时网页控制台报了一个我不太理解的错误 我使用的浏览器是谷歌浏览器 代码如下: var loader = new THREE.OBJLoader(); loader.load("model/file2.obj",function (loadedMesh) { var material = new THREE.MeshLambertMaterial({color: 0x5C3A21}); loadedMesh.children.forEach(function (child) { child.material = material; ...

1
0
发表了问答
2012/08/07 09:26

Three.JS OBJ转化为JSON 的导入问题

我写了一个Three.js,使用Maya导出了一个OBJ的三维模型文件,使用Three.js默认给出的转换脚本使OBJ转换为JS的JSON文件,转换代码 convert_obj_three.py -i model.obj -o model.js 编写了一个页面 装载了Three.js,并创建场景摄像机等,现在的问题是我要jsonloader.load就假死在那里没有反应,比较关键的是我不清楚jsonloader.load的用法是什么,代码如下 问题代码 function initObject_JS() {   /* Show model */   var json...

3
3
发表了问答
2017/08/03 15:06

three.js相机的怎么样优化可以将任意给定的模型显示在视野之中

现在我加载了任意一个OBJ模型,我想把相机优化一下,比如封装成函数,那么我怎么做可以让这个相机适合任意一个模型,即使模型的位置不是默认的世界中心。

3
0
发表了问答
2017/06/09 16:48

three.js 模型点击加载模态框

我的一个项目需要实现 点击载入模型后弹出模态框显示详细 本人刚刚接触three.js 发现模型载入没有属性(class,id什么的)所以问问,该如何加载这个功能 可以实现1:点击模型出现模态框 或者实现2:把按钮固定到3d场景里面去,不随这屏幕的转到而转到 ,多谢

1
0
发表了问答
2016/09/20 14:33

threejs 实现3d全景,场景转动方向与鼠标移动方向相反

描述如标题,本人是新手,求大神指点迷津 这是预览地址 http://fishwx.duapp.com/pano 以下为源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全景图开发测试</title> <style> *{overflow: hidden;margin:0;padding:0;} canvas { width: 100%; height: 100%; } .fixtitle { width: 190px; height:...

3
1
发表了问答
2015/12/22 15:49

three.js 加载obj文件出错

var loader = new THREE.OBJLoader();报错 Uncaught TypeError: THREE.OBJLoader is not a function 然而我在three.js 里也没找到这个函数,这个函数在哪个js里,要怎么用

3
0
发表了问答
2016/09/11 09:16

想问一下 怎么用threeJs加载一个json模型 谁懂 I need your help,please。

3
0
发表了问答
2016/05/24 15:58

Three.js渲染的全景视频在移动端无法播放的问题

用HTML5的video标签播放的MP4格式的全景视频文件,参考的是Three.js的示例webgl_video_panorama_equirectangular.html。上传到服务器上pc端可以看到,移动端看不到,移动端用chrome播放也不行,没有任何反应。

2
0
发表了问答
2016/03/14 14:54

three.js中如何对3D物体的点击事件监听

在three.js中如何监听一个3维空间的物体是否被点击了,已经如何对3D物体的都一个面进行点击的监听呢?求大侠

4
1
发表了问答
2016/05/26 17:31

three.js实现室内全景漫游,背景是一张360*180的全景图

多数人都是用的天空盒子的模型,但是由于技术原因,我无法把一张全景图做成12个小块,现在想通过给一个球体的内侧贴上这张全景图,然后摄像机从内部往外看,这样能实现球型天空的功能么?如果可以,我怎么才能给球体内部贴上图?

1
0
发表了问答
2016/04/17 17:27

three.js有没有什么好的教程

three.s有没有什么好的教程,关于导入3d格式文件数据的。

4
2
发表了问答
2016/04/08 15:06

Three能加载渲染step文件吗?

本人web3D是个菜菜!我这边有一个Step格式的模型文件,想知道Three能加载渲染step文件吗? 具体点的详细介绍

1
0
发表了问答
2016/03/11 21:58

THREE.js使用问题

如下,在buttonClick需要如下做才能进行重新渲染新的图片,texture3对象不能重新load图片,然后使用renderer.render(scene,camera);进行渲染吗?这样怎么渲染不上? 如果需要完成这样的操作,一般是修改哪个对象的相应属性呢,现在buttonClick方法里面感觉太多NEW 了 var texture3 = THREE.ImageUtils.loadTexture('right.png',{},function(){ renderer.render(scene,camera); }); var geometry3 = new THREE.CubeGeometry( 4,...

2
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
4 评论
138 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部