看结果：

看源码及解释：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>First Scene</title>

    <style type="text/css">

        body {    /*移除所有的滚动条*/

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div id="WebGL-output"></div>

    <script type="text/javascript" src="./libs/three.js"></script>

    <script>

        var scene = new THREE.Scene();    // 场景容器, 用来保存并跟踪所有我们想渲染的物体

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);    // 相机变量, 我们能够在渲染好的场景scence里看到什么

        var renderer = new THREE.WebGLRenderer();    // 渲染器对象, 负责计算指定相机角度下浏览器中scene的样子

        renderer.setClearColorHex(0xEEEEEE);    // 将renderer对象的背景色设置为0xEEEEEE

        renderer.setSize(window.innerWidth, window.innerHeight);    // 让renderer对象将scene渲染成多大尺寸

        var axes = new THREE.AxisHelper(20);    // axes坐标轴对象

        scene.add(axes);    // 把坐标轴添加到场景中去

        var planceGeometry = new THREE.PlaneGeometry(60, 20);    // PlaneGeometry: 翻译 平面几何    (参数: 宽60, 高20)

        var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });    // MeshBasicMaterial: 翻译 基础网格材质    (用来设置平面的外观, 颜色，透明度等)

        var plane = new THREE.Mesh(planceGeometry, planeMaterial);    // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中

        plane.rotation.x = -0.5*Math.PI;    // 绕x轴旋转90度

        plane.position.x = 15;    // 平面坐标位置

        plane.position.y = 0;

        plane.position.z = 0;

        scene.add(plane);    // 将平面添加到场景

        var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);    // Geometry: 翻译 立方体几何

        var cubeMaterial = new THREE.MeshBasicMaterial({ color: '#12B7F5', wireframe: true });    // 立方体是0xff0000颜色    wireframe： 线框属性设置为true

        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);    // 把立方体和他的外观合并一下

        cube.position.x = -3;    // 立方体的坐标位置

        cube.position.y = 3;

        cube.position.z = 0;

        scene.add(cube);    // 将立方体添加进去场景中去

        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);    // 把球体添加进场景去

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 30;

        camera.lookAt(scene.position);    // lookAt函数指向场景的中心

        document.querySelector('#WebGL-output').appendChild(renderer.domElement);    // 把canvas添加到指定的dom中

        renderer.render(scene, camera);    // 使用渲染器渲染

    </script>

</body>

</html>

three.js - 渲染并展示三维对象的更多相关文章

  1. js中内置有对象

    statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...

  2. 使用Three.js渲染Sketchup导出的dae

    打算做个轮盘游戏,直接上3D吧. 第一步:制作模型 3DMax和Maya下载和破解比较麻烦, 就用之前的Sketchup来试试吧. 最后效果图: 俯视图 仰视图 制作步骤: 1 先画一个圆 2 从圆心 ...

  3. 科学计算三维可视化---TVTK入门（创建和显示三维对象）

    一:创建一个基本的三维对象 (一)长方体操作 traits:就是TVTK对象的属性 (1)对象属性操作 >>> from tvtk.api import tvtk >>& ...

  4. python 爬取世纪佳缘,经过js渲染过的网页的爬取

    #!/usr/bin/python #-*- coding:utf-8 -*- #爬取世纪佳缘 #这个网站是真的烦,刚开始的时候用scrapy框架写,但是因为刚接触框架,碰到js渲染的页面之后就没办法 ...

  5. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  6. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  7. JS 学习（四）对象

    对象 在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. ...

  8. 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...

  9. js渲染的3d玫瑰

    参看下面链接: 程序员最美情人节礼物:JS渲染的3D玫瑰

随机推荐

  1. windows下navicate for mysql 零填充不显示

    在mysql数据库中我们在需要某个字段时经常要用到零填充 zerofill,之前碰到了一个大坑,在数据表sql语句中明明规定了 unsigned zerofill:但是一直没有显示出来,以为自己写的s ...

  2. JQuery基本知识汇总；JQuery常用方法；浅入了解JQuery

    一.jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些: JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载: JavaSc ...

  3. JavaScript 把字符串类型转换成日期类型

    今天在写习题时,遇到些小问题,在这里把答案分享给大家,希望能帮助到大家! 一.把字符串转换成日期类型 var str = "1997-3-12"; var d = new Date ...

  4. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  5. PHP与.Net的区别（一）接口

    一.关于接口成员 PHP的接口成员只能包括两种: 1.函数签名 2.常量 .Net的接口成员只能包括三种: 1.函数签名 2.属性(注意:是属性,不是字段) 3.事件 4.索引器(也叫有参属性)

  6. .NET代码设计简单规范

    以下转载于:http://www.it28.cn/ASPNET/825095.html 下面这个规范是我为朋友写的几点建议,写的很范,作为BLOG,愿与大家一起分享.只给出部分设计规范样例,关于.NE ...

  7. 在Visualforce页面中使用Visual Flow

    在本文中,我们将通过一个示例说明如何将"流"(Visual Flow)用于Visualforce页面. 更全面的知识可以参考官方文档. 创建流 我们要创建一个流,它的作用是得到一个 ...

  8. 【图解】Web前端实现类似Excel的电子表格

    本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品.Google的在线SpreadSheet). 工具简介: ...

  9. Core Animation-2:寄宿图

    #寄宿图 >图片胜过千言万语,界面抵得上千图片  ——Ben Shneiderman 我们在第一章『图层树』中介绍了CALayer类并创建了一个简单的有蓝色背景的图层.背景颜色还好啦,但是如果它 ...

  10. solr-query

    解释: 1.query:获取全部数据的SQL 2.deltaImportQuery:获取增量数据时使用的SQL 3.deltaQuery:获取pk的SQL 4.parentDeltaQuery:获取父 ...