使用Three.js在网上中进行3D图形的展示

  Three.js的官网https://threejs.org/

  第一个Demo,生成一个旋转的正方体

 <style>
canvas {
width: 100%;
height: 100%
}
</style> <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
var scene = new THREE.Scene();//场景 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机 var renderer = new THREE.WebGLRenderer();//渲染器 renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度 //renderer画布,所有的渲染都是画在renderer.domElement元素上,将元素挂接到body上
document.body.appendChild(renderer.domElement); //创建几何体CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
//width:立方体x轴的长度
//height:立方体y轴的长度
//depth:立方体z轴的深度,也就是长度
var geometry = new THREE.CubeGeometry(1, 1, 1);//几何体()
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material); scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render); //渲染循环
cube.rotation.x += 0.1;
cube.rotation.y += 0.1; /* 渲染,使用渲染器,结合相机和场景来得到结果画面
* render( scene, camera, renderTarget, forceClear )
* 各个参数的意义是:
* scene:前面定义的场景
* camera:前面定义的相机
* renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
* forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
*/
renderer.render(scene, camera);
}
render();
</script>

js 3d图形的更多相关文章

  1. Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  2. 【翻译】基于web创建逼真的3D图形 | CSS技巧

    个人翻译小站:http://www.zcfy.cc/article/creating-photorealistic-3d-graphics-on-the-web-css-tricks-4039.htm ...

  3. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)

    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...

  4. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  5. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

  6. 现代3D图形编程学习-环境设置

    本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

  7. 现代3D图形编程学习-关于本书(译)

    本书系列 现代3D图形编程学习 关于这本书 三维图像处理硬件很快成为了必不可少的组件.很多操作系统能够直接使用三维图像硬件,有些甚至要求需要有3D渲染能力的硬件.同时对于日益增加的手机系统,3D图像硬 ...

  8. 3D图形图像处理软件HOOPS介绍及下载

    HOOPS 3D Application Framework(以下简称HOOPS)是建立在OpenGL.Direct3D等图形编程接口之上的更高级别的应用程序框架.不仅为您提供强大的图形功能,还内嵌了 ...

  9. 上海敏行医学招聘物理仿真,3D图形人才

    工作职能: 1.开发医学虚拟手术中的柔体仿真引擎/图形效果 2.柔体仿真引擎.和引擎开发主工程师一起完善和改进仿真引擎的开发工作. 3.3D图形效果的改进. 职位要求: 1.本科以上学历,1年以上c+ ...

随机推荐

  1. 7月07日——[HouseStark] 团队简介

    团队名称 HouseStark 团队口号 winter's coming,fire's on! full of passion,we are young! pick the code, with th ...

  2. iosiPhone屏幕尺寸、分辨率及适配

    iosiPhone屏幕尺寸.分辨率及适配     1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...

  3. 使用Spring Security Oauth2完成RESTful服务password认证的过程

            摘要:Spring Security与Oauth2整合步骤中详细描述了使用过程,但它对于入门者有些重量级,比如将用户信息.ClientDetails.token存入数据库而非内存.配置 ...

  4. html行内元素和块元素标签分组

    转载 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fields ...

  5. 一分钟了解PHP

    PHP5编辑 PHP5在长时间的开发及多个预发布版本后,2004年7月13日,PHP5.0发布.该版本以Zend引擎Ⅱ为引擎,并且加入了新功能如PHP Data Objects(PDO).PHP5.0 ...

  6. mysql 安装及卸载 主从配置

    1.查询rpm -qa | grep mysql* 组件 出现类似安装包 mysql-server-5.1.71-1.el6.x86_64 mysql-libs-5.1.71-1.el6.x86_64 ...

  7. jsonp形式的ajax请求:

    sonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求 <!DOCTYPE html> <html> <hea ...

  8. Android Studio设置连续按两次退出APP

    主要是在onKeyDown方法中进行操作,直接上代码. private long mTime; @Override public boolean onKeyDown(int keyCode, KeyE ...

  9. MIPS指令学习二

    1.MIPS寻址方式 MIPS架构的寻址模式有寄存器寻址.立即数寻址.寄存器相对寻址和PC相对寻址4种,其中寄存器相对寻址.PC相对寻址介绍如下: 1.1.寄存器相对寻址 这种寻址模式主要被加载/存储 ...

  10. ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot exe

    在Mysql集群中创建用户时.出现如下错误! mysql> create user 'testuse'@'localhost' identified by '111111'; ERROR 129 ...