Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

three.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://threejs.org/
GitHub:https://github.com/mrdoob/three.js
网站描述:一个轻量的,易用的 3D 图形库。提供了canvas, svg, CSS3D和WebGL的渲染器
访问官网 GitHub

three.js它能写出在浏览器上流畅运行的3D程序,通过js让浏览器对3D的支持。

Three.js本质上是Webgl,如果你的浏览器不支持Webgl,那么肯定你就不能完整的运行Three.js。支持Webgl的浏览器很多,例如Chrome、FireFox、360安 全浏览器6.0等 


Three.js 的基本使用 

// 引入 Three.js 库
<script src="https://unpkg.com/three"></script>
function init () {
    // 获取浏览器窗口的宽高,后续会用
    var width = window.innerWidth
    var height = window.innerHeight
    // 创建一个场景
    var scene = new THREE.Scene()
    // 创建一个具有透视效果的摄像机
    var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 800)
    // 设置摄像机位置,并将其朝向场景中心
    camera.position.x = 10
    camera.position.y = 10
    camera.position.z = 30
    camera.lookAt(scene.position)
    // 创建一个 WebGL 渲染器,Three.js 还提供 <canvas>, <svg>, css3D 渲染器。
    var renderer = new THREE.WebGLRenderer()
    // 设置渲染器的清除颜色(即背景色)和尺寸。
    // 若想用 body 作为背景,则可以不设置 clearColor,然后在创建渲染器时设置 alpha: true,即 new THREE.WebGLRenderer({ alpha: true })
    renderer.setClearColor(0xffffff)
    renderer.setSize(width, height)
    // 创建一个长宽高均为 4 个单位长度的立方体(几何体)
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
    // 创建材质(该材质不受光源影响)
    var cubeMaterial = new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
    // 创建一个立方体网格(mesh):将材质包裹在几何体上
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
    // 设置网格的位置
    cube.position.x = 0
    cube.position.y = -2
    cube.position.z = 0
    // 将立方体网格加入到场景中
    scene.add(cube)
    // 将渲染器的输出(此处是 canvas 元素)插入到 body 中
    document.body.appendChild(renderer.domElement)
    // 渲染,即摄像机拍下此刻的场景
    renderer.render(scene, camera)
}
init()



仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/9

more>>
相关栏目
egret白鹭引擎
Egret是一套HTML5游戏开发解决方案
官网 GitHub
GSAP
一个“轻量级”、“高效率”、强大的2D动画引擎
官网 GitHub
EaselJS
用于创建游戏,生成艺术作品,和处理其他高级图形化的js库
官网 GitHub
Space.js
用于创建 UI 和面板组件
官网 GitHub
Phaser
PC端和移动端HTML5游戏框架
官网 GitHub
Crafty.js
一个比较简单、轻量的基于Javascript的开源html5游戏框架
官网 GitHub
stage.js
一个2D HTML5 JavaScript library 跨平台的游戏开发
官网 GitHub
QICI青瓷引擎
一款开源免费的 JavaScript 游戏引擎类库
官网 GitHub
boardgame.io
基于 React 的游戏框架
官网 GitHub
react-game-kit
利用 React 和 React Native 开发游戏的组件库
官网 GitHub
planck.js
开发创建跨平台 HTML5 游戏的 2D JavaScript 物理引擎
官网 GitHub
PhysicsJS
基于JavaScript的强大的物理引擎
官网 GitHub
webglstudio.js
浏览器里的3D开发环境
点击进入 GitHub
cax
小程序、小游戏以及 Web 通用 Canvas 渲染引擎
官网 GitHub
layaair
开源游戏引擎
官网 GitHub
cocos2d-x
一套开源,跨平台的游戏开发工具
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览