准备工作

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入门第一个案例的更多相关文章

  1. Node.js入门第一天

    一.Node.js简介 1.1 简介 V8引擎本身就是用于Chrome浏览器的JS解释部分,但是Ryan Dahl这哥们,鬼才般的,把这个V8搬到了服务器上,用于做服务器的软件. Node.js是一个 ...

  2. Vue.js入门第一课

    这个好像比ANGULAR.JS要轻量一些,看看. <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  3. js入门第一篇

    简介:JavaScript 运行在客户端(浏览器)是一种客户端语言,javascript的引擎被称为JavaScript引擎,为浏览器的一部分广泛用于客户端的脚本语言 应用场景:网页特效, 服务端开发 ...

  4. Node.js入门教程：Node.js如何安装配置并部署第一个网站

    前言:作为一个资深的前端开发人员,不懂的Node.js 那你绝对是不能跟别人说你是资深的前端程序猿滴! 今天洋哥就来和大家一起学习被大牛称之为前端必学的技能之一Node! 那么Node到底是什么呢? ...

  5. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  6. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  7. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  8. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  9. JS入门之ActiveXObject对象（转载）

    JS入门之ActiveXObject对象   此对象提供自动化对象的接口.   function ActiveXObject(ProgID : String [, location : String] ...

随机推荐

  1. 立足GitHub学编程：13个不容错过的Java项目

    立足GitHub学编程:13个不容错过的Java项目 今天我们将整理一大波干货满满的Java示例代码与能力展示素材. GitHub可谓一座程序开发的大宝库,有些素材值得fork,有些则能帮助我们改进自 ...

  2. JAVA总结---序列化的三种方式

    序列化和反序列化 序列化:可以将对象转化成一个字节序列,便于存储. 反序列化:将序列化的字节序列还原 优点:可以实现对象的"持久性", 所谓持久性就是指对象的生命周期不取决于程序. ...

  3. Springboot学习笔记（一）—— 安装

    springboot越来越流行了,相比较于springMVC,springboot采用了一种约定大于配置的理念,可以一键安装,一键运行,一键部署,内置tomcat,省去了一大堆配置的时间,并且,spr ...

  4. ES6,ES7重点介绍

    1. 字符串模板 <!--旧版拼接字符串--> var str = '我是时间:'+new Date(); <!--新版拼接字符串--> let str = `我是时间${ne ...

  5. Leecoder466 Count The Repetitons

    Leecoder466 Count The Repetitons 题目大意 定义\([s,n]\)为连续\(n\)个串\(s\)构成的串 现在给定\(s_1,n_1,s_2,n_2\),求最大的\(m ...

  6. 解决应用服务器变为集群后的Session问题

    2.2.4.2 解决应用服务器变为集群后的Session问题 先来看一下什么是Session. 用户使用网站的服务,基本上需要浏览器与Web 服务器的多次交互.HTTP 协议本身是无状态的,需要基于H ...

  7. 利用Aspose.cells 将查询出的数据导出为excel，并在浏览器中下载。

    正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的‘好’东西记 ...

  8. linux下文件的一些文件颜色的含义

    红色---->代表压缩文件 红色闪烁---->代表链接文件有问题 黄色---->代表设备文件 深蓝色---->代表目录 浅蓝色----->代表链接文件 绿色----> ...

  9. python OrderedDict

    15年16年接触python时候,还不知道这个函数,只知道dict的无序,造成了一些麻烦 今天view 代码,发现了 OrderedDict() 在python2.7中比较吃内存 pop(获取指定ke ...

  10. ASP.NET MVC API以及.Core API进行安全拦截和API请求频率控制

    安全拦截思路: 根据IP以及请求次数,该IP超过规定请求次数,就有很大可能是非正常用户进行的请求(比如WEB攻击),这时候进行拦截,拦截成功会提示:The allowed number of requ ...