three.js入门第一个案例
准备工作
1.运用three.js进行3d开发,其实和页面编程一样,首先需要在html文件中引入three.js。Three.js使用面向对象的方式来构建程序,它包含3个基本对象: 场景(scene), 相机(camera), 以及一个渲染器(renderer)。
第一步: 引入three.js.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>demo1</title>
</head>
<body>
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script>
// 这个位置是留给后面初始化和开发3d页面的js代码
</script>
</body>
</html>
第二步: 用js代码创建3D场景(scene),非常简单就一行代码.
let scene = new THREE.Scene();
第三步:用js代码创建相机(camera),再确定其位置,下面代码也就两行,但是多了参数。来说明一下参数的作用:
//fov 代表视角 我们观察位置的视觉
//aspect 宽高比 简单理解为确定3d页面的宽和高
//near 最近看到 滚轮缩放的最小距离
//far 最远看到 滚轮缩放的最大距离
let camera = PerspectiveCamera( fov, aspect, near, far );
camera.position.set( x, y,z);//x:水平方向位置, y: 竖直方向位置,z:垂直屏幕方向位置
一般给下面这组值来确定相机能够看得的位置:
let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 100,300 );
第四步:用js代码创建渲染器(renderer),设置渲染页面大小,一般为相机确定的3d页面大小,最后一行是把渲染器加入页面.
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );
第五步:给3d页面添加一个白色环境光这样我们才能够看见物体:
//环境光
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);//创建光
scene.add( ambientLight );//加入到场景
最后一步:开始时刻渲染3d页面,虽然完成了最后一步,但是运行代码后我们还是不能看见任何东西,那是因为我们只渲染了3d页面,并没有添加事物到页面,接下来我们就来添加一个球吧:
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
添加个球吧,添加了下面代码再运行下发现3d页面上有一个红色的球了,但是我们不能用鼠标来控制它,那是因为three.js里面没有来写鼠标的控制3d页面,我们还需要引入鼠标控制插件OrbitControls.js。
let ball= new THREE.SphereGeometry( 5, 32, 32 );//创建球
let ballColor= new THREE.MeshPhongMaterial( {color: 0xffff00} );//创建材质色,用来给球上色的
let sphere = new THREE.Mesh( ball, ballColor);//给球上色
scene.add( sphere );//把球加入到场景
再添加格子辅助线方便我们观察和调整物体位置:
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );//创建辅助线
scene.add( grid );//加入场景
引入OrbitControls.js,然后初始化控件,在运行页面发现可以用鼠标来控制这个球了,就问你完不完美,beautiful 不 beautiful;
<script src="/libs/OrbitControls.js"></script>
let controls =newTHREE.OrbitControls(camera);
//通过.enableZoom属性可以控制是否允许鼠标中键缩放场景,.enableZoom属性默认值true。
controls.enableZoom =true;//允许缩放`
controls.minDistance = 1;//能够缩放多小
controls.maxDistance = 2000;////能够放大多大
//通过.enableRotate属性可以控制是否允许鼠标左键旋转场景,.enableRotate属性默认值true。
controls.enableRotate =true;//允许旋转
最终代码:运行一下,查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>demo1</title>
</head>
<body>
<script src="lib/three.min.js"></script>
<script src="lib/OrbitControls.js"></script>
<script>
// 这个位置是留给后面初始化和开发3d页面的js代码
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set( 0, 50,300 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement );
// 给场景添加一个环境光
let ambientLight = new THREE.AmbientLight( 0xf5f5f5);
scene.add( ambientLight );
let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );
scene.add( grid );
let ball = new THREE.SphereGeometry( 5, 32, 32 );//5:球半径 第一个32:水平分割面的数量. 第二个32:垂直分割面的数量.
let ballColor = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
let cube = new THREE.Mesh( ball , ballColor );
scene.add( cube );
let controls =new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom =true;//允许缩放
//设置相机移动距离
controls.minDistance = 1;
controls.maxDistance = 2000;
controls.enableRotate =true;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
</script>
</body>
</html>
three.js的中文文档踏得网
three.js入门第一个案例的更多相关文章
- Node.js入门第一天
一.Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个 ...
- Vue.js入门第一课
这个好像比ANGULAR.JS要轻量一些,看看. <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- js入门第一篇
简介:JavaScript 运行在客户端(浏览器)是一种客户端语言,javascript的引擎被称为JavaScript引擎,为浏览器的一部分广泛用于客户端的脚本语言 应用场景:网页特效, 服务端开发 ...
- Node.js入门教程:Node.js如何安装配置并部署第一个网站
前言:作为一个资深的前端开发人员,不懂的Node.js 那你绝对是不能跟别人说你是资深的前端程序猿滴! 今天洋哥就来和大家一起学习被大牛称之为前端必学的技能之一Node! 那么Node到底是什么呢? ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- webpack4入门到进阶案例实战课程
愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- JS入门之ActiveXObject对象(转载)
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
随机推荐
- C#循环语句练习(三)
for循环拥有两类:一.穷举:把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. (1).羽毛球拍15元,球3元,水2元.200元每种至少一个,有多少可能. (2).百鸡百钱:公鸡2文钱一 ...
- tf.variance_scaling_initializer() tensorflow学习:参数初始化
CNN中最重要的就是参数了,包括W,b. 我们训练CNN的最终目的就是得到最好的参数,使得目标函数取得最小值.参数的初始化也同样重要,因此微调受到很多人的重视,那么tf提供了哪些初始化参数的方法呢,我 ...
- BZOJ 4236 "JOIOJI"(前缀和+map+pair)
传送门: [1]:BZOJ [2]:洛谷 •题解 定义数组 a,b,c 分别表示 'J' , 'O' , 'I' 的前缀和: 要想使区间 (L,R] 满足条件当且仅当 a[R]-a[L] = b[R] ...
- PhpStorm terminal无法输入命令的解决方法
下面小编就为大家带来一篇PhpStorm terminal无法输入命令的解决方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 在使用PhpStorm时,点击下面的 ...
- 2018-6-29-PTA-6-2-多项式求值
title author date CreateTime categories PTA 6-2 多项式求值 lindexi 2018-06-29 15:24:28 +0800 2018-6-14 22 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(开篇)
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 这是一个比较简单 ...
- Loj3033 JOISC 2019 Day2两个天线
Loj3033 JOISC 2019 Day2两个天线 下午唯一听懂的题目但,但还是比较模糊.写一篇题解来加深一下印象. 题目大意:给定\(n\)根天线,第\(i\)跟天线的高度为\(h_i\),切它 ...
- js window.open 页面之间的通讯(不同源)
一:a页面1:打开b页面let isB= window.open('b.html','b'); 2:a页面发送消息给b页面 isB.postMessage("dsddfsdf&quo ...
- IntPtr、Struct 相互转换
一般写c#代码基本用不到 相互转换 只有调用c++中的dll动态库的时候才用的到 struct转intptr public static IntPtr StructToIntPtr<T>( ...
- 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能
一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...