当前位置:首页 > 热门标签 > Three.js

Three.js

本标签包含:1篇文章

本专题中精选Three.js相关文档、视频、软件、源码等资源以及技术教程文章,更多相关内容陆续增加,建议收藏本栏目,本站整理包含Three.js的内容共计1个,剩余518个等待更新。

Three.js开发指南:WebGL的JavaScript 3D库 查看详情
11条记录
Three.js 笔记精选
网友NO.119836

Three.js加载外部模型的教程详解

1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2. 创建three.js核心对象 Scene(场景) Camera(相机) Light(光源) Mesh(模型) Renderer(渲染器) 最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera) 3. OBJ模型的导入 script type="text/javascript" src="js/OBJLoader.js"/script script type="text/javascript" src="js/MTLLoader.js"/script 4. .JS模型的导入 首先我们需要将.OBJ模型的文件转换成.JS文件的模型 .obj格式转.js格式使用的是threejs.org官方提供的一个convert_obj_three.py的工具,这个工具的使用需要安装python环境 转换过程: 将convert_obj_three.py和要转换的.obj文件和.mtl文件放在同一个目录下 打开cmd,切换到对应的目录下 python convert_obj_three.py -i infile.obj -o outfile.js [-t ascii|binary] 可以得到两种……

网友NO.271131

three.js实现3D视野缩放效果

首先,不再废话了,什么是three.js,是干什么的,知道的就是知道,不知道的就百度吧。 小编为大家推荐一篇:Three.js快速入门教程 昨儿发现three.js中的3D视野的缩小和放大效果可以用照相机的远近焦来实现。 缩小后: 这里采用的是透视照相机: //照相机配置 var fov = 40;//拍摄距离 var near = 1;//最小范围 var far = 1000;//最大范围 var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); 在这里可以改变fov的值,并更新这个照相机就可以了。 camera.fov = fov;//fov是变量哦 camera.updateProjectionMatrix();renderer.render(scene, camera); 另外:咱们都是习惯用鼠标上下滑轮实现放大缩小效果,so看代码 canvas.addEventListener('mousewheel', mousewheel, false); //鼠标滑轮 function mousewheel(e) { e.preventDefault(); //e.stopPropagation(); if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDel……

网友NO.522574

Three.js中矩阵和向量的使用教程

前言 提起矩阵,很容易让人想起我们曾经学不会的线性代数和离散数学,但是作为图形开发中的核心部分,它代表着每一次的运动和变换,就像鱼不能脱离水一样,矩阵并不是一个可以避之不谈的话题。 好消息是,Three.js帮助我们把许多矩阵运算封装成了一些顶层的方法,并提供了一个优秀的数学库,我们不太需要知道HowToCalc,只需要知道HowToUse,就可以得到绝大部分我们想要的东西。 这篇文章将要介绍的就是,如何在不了解内部结构的情况下在Three.js中使用矩阵和向量。 从一个例子开始 在讲解一些枯燥的概念前先举一个小例子,来简要说明一下为什么我们要使用矩阵方法。 这是我们最终要完成的效果。 首先,我们要创建三个几何体: var box_geometry = new THREE.BoxGeometry();var sphere_geometry = new THREE.SphereGeometry(0.5, 32, 32);var cylinder_geometry = new THREE.CylinderG……

网友NO.138675

JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结,二是与大家分享。 本篇是系列教程的第一篇:入门篇。在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法。学完这篇文章,你将学会如何在浏览器中绘制一个立体图形! 准备工作 在写代码之前,你首先要去下最新的three.js框架包,在你的页面里引入three.js,当然文件包里面也有不少的demo便于大家学习; chrome是目前支持webGL最好的浏览器,Firefow居其次,国内的遨游、猎豹经测试也可以运行。 从实……

网友NO.617522

Three.js 再探 - 写一个微信跳一跳极简版游戏

那么这个游戏到底是简单到什么程度,差不多就是到下面这个程度吧 源码地址:github.com/luosijie/th… 由于是第一次尝试写游戏, 也不知道套路对不对, 大家看着玩就好, 不要太认真, 不推荐在手机上预览, 坑还没有填好 下面是实现过程 游戏分析 首先分析一下一个这样的游戏需要什么元素 Three.js必备元素: 场景,灯光,摄像机 一块又一块的方块 会跳的那个 ,或者叫游戏者 以上 游戏过程 初始一个场景, 场景中有一个 会跳的那个 和 2个方块 鼠标按下储存 能量值 鼠标放开, 会跳的那个 根据 能量值 和 第2个方块的方向 跳出去 会跳的那个 落到方块的上平面时, 根据 位置 判断这一跳是成功还是失败 成功后进入下一步,失败就根据 位置 执行不同的摔倒方式 关于游戏的碰撞, 我们要考虑这几种情况 1.掉落在两个方块中央 2. 掉落在起跳方块左边上沿 3. 掉落在左边……

网友NO.359126

Three.js获取鼠标点击的三维坐标示例代码

由于工作需要,但是对于three.js又是一窍不通,网上的资料又很少,所以上来就让我获取坐标,真是一个头两个大。好歹最后终于实现了。 既然已经是想要获取鼠标点击的三维坐标了,相信你camera对象和scene都已经有了,如果不了解的小伙伴,可以先去看一下这两个对象。这里主要说一下怎么获取到三维坐标,原理性的东西不提。上代码: function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3();//三维坐标对象 vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 ); vector.unproject( camera ); var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectObjects(scene.children); if (intersects.length 0) { var selected = intersects[0];//取第一个物体 console.log("x坐标:"+selected.point.x); console.log("……