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

2019独角兽企业重金招聘Python工程师标准>>>

参考：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;overflow: hidden;}<style/>
</head>
<body>
<div id="WebGl-output"></div>
<script type="text/javascript" src="../../build/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../../build/three.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

js:

1、要初始化三要素scene、camera、rederer

// 定义scene,camera,renderer
// scene是一个容器，保存并跟踪我们想渲染的物体
var scene = new THREE.Scene();
// 定义在scene里能看到什么
var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000);
// 计算指定camera角度下scene的样子--使用显卡渲染
var renderer = new THREE.WebGLRenderer();
// 背景颜色
renderer.setClearColorHex(0xEEEEEE);
// 背景大小
renderer.setSize(window.innerWidth, window.innerHeight);

2、添加坐标轴

// 创建坐标轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);

3、添加一个灰色的平面

// 创建平面
// 定义平面尺寸 -- 宽60，高20
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 颜色
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
// 合并尺寸和颜色
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 定义位置
// 绕着x轴旋转90度
plane.rotation.x = -0.5*Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

4、添加一个正方体

  // 创建方块var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: true});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;scene.add(cube);

5、添加一个球体

  // 创建球体var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;scene.add(sphere);

6、指定相机的位置和悬挂的角度

  // 指定相机的位置，将其悬挂在场景上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;// 指向场景中心camera.lookAt(scene.position);

7、讲scene和camera挂载到html

  // 挂载到html上$("#WebGl-output").append(renderer.domElement);renderer.render(scene, camera);

结果如图

转载于:https://my.oschina.net/u/3589012/blog/3050284

学习threeJS(一)--第一个threeJs相关推荐

HTML+ThreeJS从零开始搭建一个展示三维模型展示网站【0】
ps 最近在做三维建模相关的工作,每次展示三维模型都需要用blende或者其他软件录制视频或图片特别不方便所以想用threejs html做一个三维模型展示的网页,本次制作只会涉及到简单的前端知识,本 ...
【ThreeJS基础教程-初识Threejs】1.6各种各样的几何体
各种各样的几何体学习ThreeJS的捷径常用内置几何体介绍立方缓冲几何体BoxGeometry 分段数的意义(该部分仅建议了解即可,无需深入) 圆形缓冲几何体CircleGeometry 圆柱缓 ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
C#多线程学习(二) 如何操纵一个线程
C#多线程学习(二) 如何操纵一个线程原文链接:http://kb.cnblogs.com/page/42529/ [1] C#多线程学习(二) 如何操纵一个线程 [2] C#多线程学习(二) 如何 ...
[Python学习]PycURL简单学习 - limodou的学习记录 - limodou是一个程序员，他关心的焦点是Python, DocBook, Open Source …...
[Python学习]PycURL简单学习 - limodou的学习记录 - limodou是一个程序员,他关心的焦点是Python, DocBook, Open Source - [Python学习] ...
mysql用创建的用户登陆并修改表格_MySQL 基础学习二：创建一个用户表，并增删改查...
MySQL 基础学习二:创建一个用户表,并增删改查提示:MySQL 命令建议都用大写,因为小写运行时,还是翻译成大写的. 第一步,创建一个用户表 1,打开控制台,进入数据库 C:\Users\Ad ...
我的学习工作经历，一个园林专业中专毕业生的IT之路
魏琼东,男,1983年生人,祖籍甘肃陇南人,首先得感谢我父亲给我取了这么一个好名字,至少我非常喜欢他,因为目前还没有发现和我同名的人. 我是1998-2002年在甘肃林业学校读了四年的园林专业,那四年 ...
Spring学习笔记：第一个Spring Boot程序HelloWorld
Spring学习笔记:第一个Spring Boot程序HelloWorld 一.跟着 Spring 了解技术趋势 1.看看 Spring 5.x 的改变暗示了什么 2.Spring Boot 和 Sp ...
C#.NET学习笔记2---C#.第一个C#程序
C#.NET学习笔记2---C#.第一个C#程序技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:__________以前的网站现在不弄了,抱歉 6.第一个 ...

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

学习threeJS(一)--第一个threeJs相关推荐

最新文章

热门文章