1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <title>threejs初体验</title>

 6         <script src="three.min.js"></script>

 7         <style>

 8             body {

 9                 margin: 0;

10                 overflow: hidden;

11             }

12         </style>

13     </head>

14     <body>

15         <div id="webgl-output"></div>

16         <script>

17             function init() {

18                 // 定义场景，

19                 var scene = new THREE.Scene();

20                 // 定义摄像机

21                 var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);

22                 // 定义渲染器

23                 var renderer = new THREE.WebGLRenderer();

24                 // 使用setClearColor这个api讲场景背景色设置为0xEEEEEE

25                 renderer.setClearColor(0xEEEEEE);

26                 // 设置场景大小

27                 renderer.setSize(window.innerWidth, window.innerHeight);

28

29                 // 创建了轴线，并添加到场景中

30                 var axes = new THREE.AxesHelper(20);

31                 scene.add(axes);

32

33                 // 接下来，创建平面，THREE.PlaneGeometry定义平面大小

34                 var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);

35                 // THREE.MeshBasicMaterial：创建颜色为0xcccccc的基本材质

36                 var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});

37                 // 将对象planeGeometry和planeMaterial合并到名为plane的网格对象中

38                 var plane = new THREE.Mesh(planeGeometry, planeMaterial);

39                 // 将平面添加到场景前，还需要设置平面的位置， 先将平面围绕x轴旋转90度，

40                 // 然后使用position属性来定义其在场景中的位置

41                 plane.rotation.x = -0.5 * Math.PI;

42                 plane.position.x = 15;

43                 plane.position.y = 0;

44                 plane.position.z = 0;

45                 scene.add(plane);

46

47                 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

48                 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});

49                 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

50                 cube.position.x = -4;

51                 cube.position.y = 3;

52                 cube.position.z = 0;

53                 scene.add(cube);

54

55                 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

56                 var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

57                 var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

58                 sphere.position.x = 20;

59                 sphere.position.y = 4;

60                 sphere.position.z = 2;

61                 scene.add(sphere);

62

63                 camera.position.x = -30;

64                 camera.position.y = 40;

65                 camera.position.z = 30;

66                 camera.lookAt(scene.position);

67

68                 document.getElementById('webgl-output').appendChild(renderer.domElement);

69                 renderer.render(scene, camera);

70             }

71             window.onload = init;

72         </script>

73     </body>

74 </html>

threejs第一个案例的更多相关文章

  1. 学习ExtjsForVs(第一个案例HelloWord)

    第一个案例-Hello Word 1.本次练习以ext-4.0.7为例,首先从网上下载ext包. 2.打开包后将里面的三个文件或文件夹拷贝到项目中. resource文件夹 bootstrap.js ...

  2. spring boot实战(第一篇)第一个案例

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   spring boot实战(第一篇)第一个案例 前言 写在前面的话 一直想将spring boot相关内容写成一个系列的 ...

  3. （转）编写Spring的第一个案例并测试Spring的开发环境

    http://blog.csdn.net/yerenyuan_pku/article/details/52832145 Spring4.2.5的开发环境搭建好了之后,我们来编写Spring的第一个案例 ...

  4. javascript进阶教程第一章案例实战

    javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...

  5. 第91讲：Akka第一个案例动手实战架构设计

    我们来看一下Akka的一个简单的wordcount的案例架构设计 从图中我们可以看出,不同的行我们是交给不同的actor进行入理的,每行首先进行map操作,识别出每个单词,然后交给reduce步骤的a ...

  6. JavaScipt30(第一个案例)（主要知识点：键盘事件以及transitionend）

    今天得到一个github练习项目,是30个原生js写成的小例子,麻雀虽小五脏俱全,现在记录一下第一个. 第一个是键盘按键时页面上对应的键高亮,同时播放音频,松开后不再高亮. 我自己实现了一下,然后查看 ...

  7. 使用visual studio配置和运行《opengl圣经》的第一个案例

    对vc++新手来说,想把opengl圣经里的教学案例运行起来还真不是一件容易的事情,而且并没有完整的操作流程教学,这里就总结一下吧: 先安装cmake,用于生成vs的工程文件,安装过程中选中“将目录添 ...

  8. 第1章 重构，第一个案例（3）：运用多态取代switch

    3. 运用多态取代与价格相关的条件逻辑 3.1 switch和“常客积分”代码的再次搬迁 (1)switch:最好不要在另一个对象的属性上运用switch语句 switch(getMovie().ge ...

  9. 第1章 重构，第一个案例（2）：分解并重组statement函数

    2. 分解并重组statement (1)提炼switch语句到独立函数(amountFor)和注意事项. ①先找出函数内的局部变量和参数:each和thisAmount,前者在switch语句内未被 ...

  10. 第1章 重构，第一个案例（1）：糟糕的statement函数设计

    1. 启航:影片出租,计算每一位顾客的消费金额并打印清单 1.1 场景说明: (1)影片分类规则:普通片.儿童片和新片等3类 (2)每种影片计算租金的方式. ①普通片:基本租金为2元,超过2天的部分每 ...

随机推荐

  1. 在自动化测试时，Python常用的几个加密算法，你有用到吗

    本文分享自华为云社区<『加密算法』| 自动化测试时基于Python常用的几个加密算法实现,你有用到吗?>,作者:虫无涯 . 写在前边 这几天做自动化测试,遇到一个问题,那就是接口的请求的密 ...

  2. 基于python人脸识别考勤系统（语音播报）

    介绍: 本项目是大二寒假在家没事写的,一直没有时间讲本项目分享出来,现在有时间了哈.那就让我简单的将项目介绍一下吧.好了废话不多说了,直接上图 初始化界面: 可以看到所有的功能都展现在了左边的功能栏中 ...

  3. CompletableFuture进阶

    CompletableFuture进阶 1.异步任务的交互 异步任务交互指将异步任务获取结果的速度相比较,按一定的规则( 先到先用 )进行下一步处理. 1.1 applyToEither applyT ...

  4. vue3.3新特性defineOptions

    当我们使用选项式api时候,可以轻松创建与setup()选项同级别的选项. 但是,用了

  5. 企业u盘禁止访问如何解锁

    如果您遇到了U盘禁止访问的问题,可能是由于系统设置.安全策略或第三方工具导致的.以下是一些可能的解锁方法,具体的操作可能因具体情况而异: 管理员权限: 确保您有足够的管理员权限来解锁U盘.有时,系统管 ...

  6. 欧拉定理 & 扩展欧拉定理 笔记

    欧拉函数 欧拉函数定义为:\(\varphi(n)\) 表示 \(1 \sim n\) 中所有与 \(n\) 互质的数的个数. 关于欧拉函数有下面的性质和用途: 欧拉函数是积性函数.可以通过这个性质求 ...

  7. HTTP安全头部对jsp页面不生效

    本文于2016年4月底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 诡异的问题 AppScan扫描报告中提示,Web服务器返回js.cs ...

  8. Spring Boot入坑-1-入坑准备&Spring简介

    [写在前面] 长期做基于Spring Boot的企业应用,计划将与应用相关的技术点,通过简介.步骤.示例的方式,记录并分享出来,用于作为Spring Boot入门的记录与教程 计划的内容有: Spri ...

  9. VsCode如何配置C语言环境？

    以前学校上C语言课程都是使用VC++6.0上课,这个学期为了复习一遍C语言,而且自己经常使用VSCode开发前端项目,所以为了方便.这里把需要的环境和插件配置在这里介绍一下. Windows环境下安装 ...

  10. 细说GaussDB(DWS)的2种查询优化技术

    本文分享自华为云社区<GaussDB(DWS)查询优化技术大揭秘>,作者: 胡辣汤. 大数据时代,数据量呈爆发式增长,经常面临百亿.千亿数据查询场景,当数据仓库数据量较大.SQL语句执行效 ...